ng-click 首先应用 class，然后执行函数

Question

我有一个购物车（一个 rootScope 数组），它变成了其中的项目列表，包括一个用于从购物车数组（红色 X）中删除该项目的按钮。

I don't have enough reputation to add an image, so here's a link to what it looks like

我想要发生的是，当我单击其中一个红色 X 按钮时，该项目首先执行动画（某种淡出），然后实际的购物车具有从中拼接的项目。使用 ng-click 我可以做一个或另一个，但不能同时做两个。当两者都应用时，动画不会触发，因为它没有时间触发。有没有办法等待动画结束，然后执行功能？

（通过在 ng-click 上将 class 应用到 div 执行的动画，所以可能会监视 class 变化？）

这是我的代码。该代码在代码段中不起作用，但您可以看到我的函数和 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;
}

在你的例子中，你不需要自己做任何应用 class 的工作，ngAnimate 会为你做。

这是一个 Plunker 演示您将如何做到的。

ng-click 首先应用 class，然后执行函数

ng-click first apply class, then execute function

function

delayed-execution

angularjs

angularjs-ng-repeat

angularjs-ng-click