Javascript AngularJS动画中的完全回调

我有一个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（）

方法提供一个额外的“完整”回调作为参数，以便可以调用/传递给这些方法。通过动画指令，这是可能的吗？

您已经传递了一个“完整”回调（第二个参数到

元素.slideUp（）

），但是您没有使用自己的，只需调用

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();
    }
}

及

其中，

yourCallback

是您定义的任何函数，

callbackArgs

是您希望传递给它的可选参数数组

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();
        }
    };
});

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

---

我刚才有个问题，这就是我成功的原因：

我对动画进行了相同的设置，但是我在正在制作动画的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();
            });
        }
    };
} );

---

我希望这对其他人有帮助

谢谢你，虽然我不认为它解决了这个问题。Angular传递done（）方法以便调用以关闭动画（这就是为什么我将其转发给jQuery方法）。我想做的是以某种方式将我自己的回调注入start（）方法。由于动画将用作指令（ng animate=“slide”），您的全局定义回调不可重用。但您说“我希望能够提供一个完整的”回调，您没有说任何关于

开始的内容

？不幸的是，此解决方案不可重用。我声明我的动画将在整个应用程序中全局使用，这就是为什么我希望能够以某种方式传递完整的回调。在设置中定义回调意味着它将应用于动画的所有用途，这不是我想要的。

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();
            });
        }
    };
} );