Question

我想将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）或访问动画中的元素范围（这对我来说似乎真的很烦人）。有没有正确的方法呢？

在速度旁边使用ng-animate甚至是有意义的还是我应该创建自己的函数来保存动画代码？

Answer 1

也许这更像是一种解决方法，但我现在编写了自己的动画师服务，而不是现在使用ngAnimate。它使用角度$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;
});

Answer 2

看起来你找到了解决问题的好方法！

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

您使用的函数包含第二个参数className：function (element, className)

我使用了角度ngAnimate，如下所示：

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

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

function(element, className, doneFn) {}

希望这有帮助！

使用ng-animate以角度1.3+创建自定义JS动画的正确方法

2 个答案: