Complete callback in AngularJS animation

Question

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 "complete" 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?

Tomalak · Accepted Answer · 2013-05-16 12:27:36Z

3

You are already passing a "complete" 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.

edited May 16, 2013 at 12:27

answered May 16, 2013 at 12:10

Tomalak

340k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brett Postin Over a year ago

Thanks for this, although I do not think it addresses the problem. Angular passes the done() method in order to be invoked to close off the animation (which is why I forward it to the jQuery methods). What I would like to do is somehow inject my own callback to the start() method. As the animation will be used as a directive (ng-animate="slide") your globally defined callback is not re-usable.

Tomalak Over a year ago

But you said "I would like to be able to supply a "complete" callback", you did not say anything about start?

gsklee · Accepted Answer · 2013-05-21 17:01:49Z

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

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

answered May 21, 2013 at 17:01

gsklee

4,9644 gold badges42 silver badges56 bronze badges

1 Comment

Brett Postin Over a year ago

Unfortunately this solution isn't re-usable. I'm declaring my animation to be used globally throughout my application, which is why I want to be able to somehow pass in a complete callback. Defining the callback in the setup means it will apply to all uses of the animation which is not what I'm looking for.

joe_coolish · Accepted Answer · 2014-08-14 20:18:15Z

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!

Collectives™ on Stack Overflow

Complete callback in AngularJS animation

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related