Question

我有一个AngularJS动画......

app.animation('slide-show', function () {
    return {
        setup: function (element) {
        },
        start: function (element, done) {
            element.slideDown(400, done);
        }
    };
} );

app.animation('slide-hide', function () {
    return {
        setup: function (element) {
        },
        start: function (element, done) {
            element.slideUp(400, done);
        }
    };
} );

我希望能够提供额外的“完整”回调作为start()方法的参数，以便可以调用/传递给jQuery方法。这是否可以通过动画指令实现？

Answer 1

您已经传递了“完整”回调（第二个参数为element.slideUp()），但是您没有使用自己的回调，而只需调用Angular提供的done函数。

你必须最终调用该函数，但没有任何东西可以阻止你事先做好自己的工作。

app.animation('slide-hide', function () {
    return {
        setup: function (element) {
        },
        start: function (element, done) {
            element.slideUp(400, function () {
                // handle the end of the slideUp animation
                // ...

                // inform Angular that you're done
                done();
            });
        }
    };
});

如果您愿意，可以概括一下：

function AnimationCallback(done, callback, callbackArgs) {
    return function () {
        if (typeof callback === "function") {
            // 'this' will be the DOM element that just finished animating
            callback.apply(this, callbackArgs);
        }
        done();
    }
}

和

app.animation('slide-hide', function () {
    return {
        setup: function (element) {
        },
        start: function (element, done) {
            element.slideUp(400, new AnimationCallback(done, yourCallback));
        }
    };
});

其中yourCallback是您定义的任何函数，callbackArgs是您想要传递给它的可选参数数组。

Answer 2

app.animation('slide-show', function() {
    return {
        setup: function (element) {
            var complete = function() {
                /* Your implementation here */
            };

            return complete;
        },
        start: function (element, done, complete) {
            element.slideDown(400, done);

            /* Invoke the function and do something */
            complete();
        }
    };
});

有关详细信息，您可能还想查看本文：

http://gsklee.im/post/50254705713/nganimate-your-angularjs-apps-with-css3-and-jquery#javascript-defined-animations

Answer 3

我刚才有了这个问题，这就是我取得成功的方式：

我有相同的动画设置，但后来我在动画的HTML元素上添加了ng-animated属性，然后添加了以下内容：

app.animation('slide-show', function () {
    return {
        setup: function (element) {
        },
        start: function (element, done) {
            element.slideDown(400, function(){ 
                 var el = angular.element(element[0]);
                 el.scope().$eval(el.attr('ng-animated'));
                 done();
            });
        }
    };
} );

app.animation('slide-hide', function () {
    return {
        setup: function (element) {
        },
        start: function (element, done) {
            element.slideUp(400, function(){ 
                 var el = angular.element(element[0]);
                 el.scope().$eval(el.attr('ng-animated'));
                 done();
            });
        }
    };
} );

我希望这有助于其他人！

在AngularJS动画中完成回调

3 个答案: