Question

在尝试使用AngularJS $ animate构建基于velocity.js的动画时，虽然解决方案非常简单，但我遇到了一个小问题，我几个小时都无法想象。为了避免同样的困难，我向你提出我的解决方案：

考虑以下代码：

app.directive("animate", function ($animate, $timeout) {
    return function (scope, element, attrs) {
        element.on('click', function () {
            // to fire $animate, need to wrap it into a $timeout wrapper.
            $timeout(function () {
                $animate.addClass(element, 'test').then(function () {
                    $timeout(function () {
                        $animate.removeClass(element, 'test');
                    }, 0);
                });
            }, attrs.delay || 0);
        });
    };
});

Answer 1

根据{{3}}， $ animate返回一个承诺。但是要在实际完成自定义动画时触发此承诺，您必须使用作为第三个参数提供的done()函数，如下所示：

app.animation('.test', function () {
    var fn = function (element, className, done) {
        var effect = {
            css: {
                translateX:'+=500'
            },
            options: {
                easing: 'linear',
                duration: 2000,
                complete: function () {done();}
            }
        };

        element.velocity(effect.css, effect.options);
    };

    return {
        addClass: fn,
        removeClass: function () {console.log('removed';}
    };
});

小技巧，所以，但是从现在开始我发现的所有文档和教程都缺少这个原型。使用Angular享受您的第三方库动画。

使用第三方JavaScript库自定义AngularJS动画

1 个答案: