javascript - AngularJS 动画中的完成回调

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() 的第二个参数)，但是您没有使用自己的回调，而是简单地调用了done Angular 提供的功能。

您最终必须调用该函数，但没有什么能阻止您事先完成自己的工作。

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 是您要传递给它的可选参数数组。