1

我想结合使用 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'));

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

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

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

4

2 回答 2

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;
});
于 2015-02-20T22:11:27.680 回答
0

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

我认为您的原始代码不起作用，因为您没有使用内置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仍然是 api的一部分ngAnimate。此外，如果您仍然想使用className（即使看起来您没有使用它），您可以像这样使用该函数：

function(element, className, doneFn) {}
于 2016-01-31T12:14:29.520 回答