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上将一个类应用于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，展示了你将如何做到这一点。

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

1 个答案: