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

Posted 2023-03-06

【中文标题】带有回调的AngularJS动画，等待下一个动画开始

【英文标题】：AngularJS animate with callback, wait for the next animation to start

【发布时间】：2014-12-15 15:55:14

【问题描述】：

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

【参考方案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

$animate (v1.2.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。一旦动画完成、被取消或由于动画被禁用而被跳过，promise 本身就会被解决。 （注意即使动画被取消，它仍然会调用动画的resolve函数。）See Documentation

对于 1.3 及更高版本，您需要利用通过 $animate 服务调用 addClass 或 removeClass 返回的承诺。您可以通过在末尾链接 then 函数来做到这一点。例如：

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

如果您使用的是 AngularJS 1.3 RC（截至本文为止，最新版本不稳定）并且您不熟悉 Promise，请参考 $q 服务。

【讨论】：

首先，感谢您的回复 ;) 非常有帮助 - 在我的 jsfiddle 示例中，我使用最新版本的 AngularJS 1.3.x - 你介意给我一个小例子吗？完成了吗？

好的 - 我结束了我做别的事情 - 但如果你想花时间，我仍然对“更好”的解决方案感兴趣;）这是我的方式;）jsfiddle.net/zookz/9kanr29z/12跨度>

@pkdkk 抱歉，我有点晚才回复您 - 我喜欢在您的解决方案中使用 $timeout ，这可能是您使用动画而不是过渡的最佳解决方案。我会 fork 你的小提琴并很快在这里分享 $animate 解决方案。

好的@pkdkk。由于您为卡片切换到 ng-repeat，因此不再使用 $animate。但是，我确实拼凑了一种“角度方式”来制作您想要的动画（大部分情况下），只是不使用 $animate 服务。相反，我使用了本机内置的东西。让我知道你的想法，如果你仍然需要一个 $animate 承诺示例。 jsfiddle.net/9kanr29z/14对代码的改动很抱歉，但我想尽可能地简化它。