I have an AngularJS animation...

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

I would like to be able to supply an additional "plete" callback as a parameter to the start() methods so that it can be invoked/passed to the jQuery methods. Is this somehow possible through the animation directives?

I have an AngularJS animation...

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

I would like to be able to supply an additional "plete" callback as a parameter to the start() methods so that it can be invoked/passed to the jQuery methods. Is this somehow possible through the animation directives?

• javascript
• animation
• angularjs
• callback

3 Answers 3

You are already passing a "plete" callback (the second parameter to element.slideUp()), however you are not using your own but you simply call the done function Angular provides.

You must call that function eventually, but nothing keeps you from doing your own work beforehand.

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

You could generalize this, if you want:

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

and

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

where yourCallback is any function you have defined and callbackArgs is an optional array of arguments that you'd like to pass to it.

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

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

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

For more details you may wanna checkout this article as well:

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

I just had this question and this was how I achieved success:

I had the same setup for animation, but then I added an ng-animated property on the HTML element that I was animating, then I added the following:

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

I hope this helps someone else!