使用 ng-animate 在 Angular 1.3+ 中创建自定义 JS 动画的正确方法答案

【问题标题】：Proper way to create custom JS animations in angular 1.3+ with ng-animate使用 ng-animate 在 Angular 1.3+ 中创建自定义 JS 动画的正确方法
【发布时间】：2021-10-28 21:29:07
【问题描述】：

我想结合使用 velocity.js 和 ng-animate 来为我的应用创建自定义 js 动画。我在网上搜索了很多答案和教程，这些答案和教程都引用了旧版本的 ng-animate，随着时间的推移，这显然已经改变了很多 API。所以现在，这就是我的动画的样子：

app.animation('.lb-fade', function () {
    return {
        addClass: function (element, className) {
            element.velocity({
                opacity: 1
            },{
                duration: 900,
                easing: 'easeInSine'
            });
        }
    };
});

我是这样使用的：

$animate.addClass(backdrop, 'lb-fade').then(console.log('promise resolved'));

这种工作，但我有两个问题：

承诺有时会提前解决（在动画完成之前）。它看起来像是随机发生的。
如何将参数传递给动画？例如，我希望我的一些 lb-fade 动画使用速度延迟选项。我可以创建多个动画（！DRY）或访问动画内的元素范围（这对我来说似乎真的很hacky）。有正确的方法吗？

将 ng-animate 与 velocity 一起使用是否有意义，或者我应该创建自己的函数来保存动画代码？

【问题讨论】：

不确定是不是拼写错误，但应该是.then(function() { console.log('promise resolved'); }); 否则会立即解决。
@tasseKATT 我之前尝试过，它根本没有以这种方式解决。可能它返回了一个被拒绝的承诺，我没有测试过。请参阅我的回答，了解我是如何解决我的问题的。

标签： angularjs angular-promise ng-animate velocity.js

【解决方案1】：

也许这更像是一种解决方法，但我现在编写了自己的动画服务，而不是现在使用 ngAnimate。它使用 angulars $q 来实现承诺。基本上，ngAnimate 就是这样做的，但不知何故，我认为它不知道速度何时完成动画。

这是我的服务：

.service('animator', function animator($q) {

    this.flyOutRight = function($element) {
        return $q(function(resolve) {
            $element.velocity({
                //css properties to get animated
            }, {
                duration: 200,
                complete: function () {
                    $element.remove();
                    resolve();
                }
            });
        });
    };

    //some more animations

});

用法：

animator.flyOutRight($oldImage).then(function(){
    changeImageMutex = false;
});

【讨论】：

【解决方案2】：

您似乎找到了解决问题的好方法！

我认为您的原始代码不起作用，因为您没有使用内置的 done 函数。它实际上是 ngAnimate 在动画结束时返回的默认承诺的包装器。

你使用了第二个参数className的函数：function (element, className)

我使用了angular的ngAnimate如下：

app.animation('.lb-fade', function () {
return {
    addClass: function (element, doneFn) {
        element.velocity({
        opacity: 1
      },{
        duration: 900,
        complete: doneFn
      });
    }
  };
});

这对我很有用。看起来doneFn 是still part of the api 对于ngAnimate。另外，如果你仍然想使用className（即使看起来你没有使用它），你可以像这样使用它：

function(element, className, doneFn) {}

【讨论】：