AngularJS使用回调进行动画处理,等待下一个动画启动

Question

我有一个简单的AngularJS项目,带有一个指令,我希望在另一个完成时启动一个CSS动画 - 希望我做一个sende,我这里有一个jsfiddle示例,动画同时运行 - 我想要第一张"卡片"在下一次开始之前停止的动画 - 怎么能这样做？

<div ng-app="flip" ng-controller="flipCtrl">
    <div class="card card1 draw" my-show="">test1</div>
    <div class="card card2 draw" my-show="">test2</div>
</div>

app.directive("myShow", function(){
  return {
    scope:{
      param: "&myShow"
    },
    link: function( scope, element, attrs ){
        element.on('click', function() {
            if(element.hasClass('draw')) {
                element.removeClass('draw');                
            }else{
                element.addClass('draw');
            }
        });
    }
  }
});

http://jsfiddle.net/9kanr29z/5/

Answer 1

首先,重要的是要记住包含您正在使用的AngularJS版本.但是,我将提供1.2和1.3+解决方案.如果您使用的是版本低于1.2,就应该真正考虑升级.

$ animate服务

$ animate服务提供了一个addClass方法和一个removeClass方法,可以轻松地处理您需要的内容.行为会根据您使用的AngularJS版本而更改.

无论哪种方式,您首先要包含animate模块(它与angular.js主文件分开),然后将$animate服务注入您需要的位置.

app.directive("myShow", [
  '$animate',
  function($animate) {
    return {
      // your directive config
    };
  }
]);

AngularJS v1.2.x

在$动画(v1.2.26)服务的addClass与removeClass方法有三个参数:元素,类名和doneCallback.在这里,您可以使用doneCallback函数参数来判断动画何时完成.例如:

$animate.addClass(element, 'draw', function() {
  // if we are in here, the animation is complete
});

AngularJS v1.3.x

使用AngularJS 1.3,$ animate服务上的每个动画方法在调用时都会返回一个promise.一旦动画自动完成,已取消或由于动画被禁用而被跳过,则承诺本身将被解析.(请注意,即使取消动画,它仍将调用动画的解析功能.)请参阅文档

使用1.3及更高版本,您需要使用通过呼叫addClass或removeClass通过$animate服务返回的承诺.你可以通过then在最后链接功能来实现.例如:

$animate.addClass(element, 'draw').then(function() {
  // if we are in here, the animation is complete
});

如果您使用的是AngularJS 1.3 RC (本文中最新的不稳定版)并且您不熟悉promises,那么请参考$ q服务.