AngularJS动画带有回调，等待下一个动画开始

AngularJS animate with callback, wait for the next animation to start

本文关键字：动画 等待 下一个 开始 回调 AngularJS      更新时间：2023-09-26

我有一个简单的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/

首先，重要的是要记住包含您正在使用的AngularJS的哪个版本。但是，我将同时提供1.2和1.3+解决方案。如果您使用的版本低于1.2，则应该考虑升级。

$animate服务

$animate服务提供了一个addClass方法和一个removeClass

无论哪种方式，您都可以先包含animate模块（它与angular.js主文件分离），然后在需要的地方注入$animate服务。

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

AngularJS v1.2.x

$animate（v1.26）服务的addClass和removeClass方法有三个参数：element、className和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及以上版本，您需要使用通过$animate服务调用addClass或removeClass返回的promise。您可以通过在末尾链接then函数来完成此操作。例如：

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

如果您正在使用AngularJS 1.3 RC（截至本文发布的最新不稳定版本），并且您不熟悉promise，那么请参考$q服务。

相关文章：