ng-click сначала применяет класс, затем выполняет функцию

Question

У меня есть корзина для покупок (массив rootScope), которая превращается в список элементов в ней, включая кнопку для удаления этого элемента из массива корзины (красный X).

У меня недостаточно репутации, чтобы добавить изображение, поэтому вот ссылка на то, как оно выглядит

Я хочу, чтобы при нажатии на одну из красных кнопок X элемент сначала выполнял анимацию (какое-то затухание), а затем в реальной корзине сращивался элемент. Используя ng-click, я могу сделать одно или другое, но не оба. Когда оба применяются, анимация не срабатывает, потому что не успевает. Есть ли способ дождаться окончания анимации, а затем выполнить функцию?

(анимация, выполняемая путем применения класса к элементу div по щелчку мыши, так что, возможно, следите за изменением класса?)

Вот мой код Код не будет работать во фрагменте, но вы можете увидеть мои функции и HTML.

$scope.removeFromCart = function(removedGame) {
        index = $rootScope.cartArray.indexOf(removedGame);
        $rootScope.cartArray.splice(index, 1);
    };


$(".disappear").hasClass('fadeOutRight')(function(){
   $scope.removeFromCart(cartArray[0]) ;
});

.cartGameDiv {
    height: 140px;
    width: auto;
}

<div ng-repeat = "newGame in cartArray" ng-class="disappear">
        <div>
            <div class="col-sm-11 col-lg-11 col-md-11 cartGameDiv">
                <div class="thumbnail">
                    <div class="pull-left">
                        <img style="height: 100px; width: 213px; padding: 5px; margin-top: 5px" src="{{newGame.thumbnail}}" alt="">
                        <div id="ratingDiv" style="margin-left: 8px; margin-right: 8px; margin-bottom: 5px;">
                            <div style="display: inline-block" ng-bind-html="getTrustedHtml(newGame)"></div>
                            <p class="pull-right" style="color: #d17581">{{newGame.numberReviews}} reviews</p>
                        </div>
                    </div>

                    <div class="caption">
                        <h4 style="margin-top: 0" class="pull-right">{{newGame.price}}</h4>
                        <h4 style="margin-top: 0"><a class="categoryGameName" href="#details/{{myGamesList.indexOf(newGame)}}">{{newGame.name | removeSubName}}</a>
                        </h4>
                        <p>{{newGame.description.substring(0,290) + '...'}}</p>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-sm-1 col-lg-1 col-md-1 cartGameDiv">
            <img style="margin-bottom: 10px; margin-top: 10px;" src="images/glyphIconCheckmark.png" alt=""/>
            <img ng-click="disappear='animated fadeOutRight'; removeFromCart(newGame)" style="margin-bottom: 10px" src="images/glyphIconRemoveGame.png" alt=""/>
            <img src="images/glyphIconLike.png" alt=""/>
        </div>
    </div>

Если у вас есть идея, как отложить вызов функции до окончания анимации, я очень ценю это! Спасибо!

Answer 1

Это очень просто сделать с помощью ngAnimate. Добавьте скрипт ngAnimate на свою страницу (вы можете получить это из многочисленных CDN), включите ngAnimate в качестве зависимости к вашему модулю, а затем просто добавьте несколько простых CSS.

.ng-leave{
    -webkit-animation: fadeOutRight 1s;
    -moz-animation: fadeOutRight 1s;
    -o-animation: fadeOutRight 1s;
    animation: fadeOutRight 1s;
}

В вашем примере вам не нужно выполнять какую-либо работу, применяя класс самостоятельно, ngAnimate сделает это за вас.

Вот Plunker, демонстрирующий, как вы это сделаете.