2

我有一个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方法。这是否可以通过动画指令以某种方式实现？

4

3 回答 3

3

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

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

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

whereyourCallback是您定义的任何函数，并且callbackArgs是您要传递给它的可选参数数组。

于 2013-05-16T12:10:13.420 回答
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

于 2013-05-21T17:01:49.277 回答
1

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

我对动画进行了相同的设置，但随后我在要制作动画ng-animated的 HTML 元素上添加了一个属性，然后添加了以下内容：

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

我希望这对其他人有帮助！

于 2014-08-14T20:18:15.790 回答