Custom AngularJS animation with third-party javascript libraries

Question

While trying to build an animation based on velocity.js with AngularJS $animate, I encountered a small problem I couldn't figure for hours, although the solution was very simple. To avoid you the same difficulty, I present to you my solution:

Considering the following code:

app.directive("animate", function ($animate, $timeout) {
    return function (scope, element, attrs) {
        element.on('click', function () {
            // to fire $animate, need to wrap it into a $timeout wrapper.
            $timeout(function () {
                $animate.addClass(element, 'test').then(function () {
                    $timeout(function () {
                        $animate.removeClass(element, 'test');
                    }, 0);
                });
            }, attrs.delay || 0);
        });
    };
});

Just wanted to note I flagged this for "moderator" attention. I think this is probably valuable for someone, but needs to be re-phrased in terms of question and answer instead of it all being in the question section. — Josh
– Josh, Commented Dec 9, 2014 at 13:37
Thx for the flag ! First post over there so quite ignorant of the best practices :) — grebett
– grebett, Commented Dec 9, 2014 at 15:12
I just don't want people to come in a close it out. The information is valuable, but just needs to be broken out. I don't think only a moderator can do that... — Josh
– Josh, Commented Dec 9, 2014 at 16:15
You can (and should) post your own answer with the solution in it rather than mix the question and answer together. — Flexo - Save the data dump
– Flexo - Save the data dump ♦, Commented Dec 10, 2014 at 10:21

grebett · Accepted Answer · 2014-12-11 10:26:40Z

$animate returns a promise, according to the official documentation. But to fire this promise when the custom animation is actually finished, you must use the done() function provided as third argument such as below :

app.animation('.test', function () {
    var fn = function (element, className, done) {
        var effect = {
            css: {
                translateX:'+=500'
            },
            options: {
                easing: 'linear',
                duration: 2000,
                complete: function () {done();}
            }
        };

        element.velocity(effect.css, effect.options);
    };

    return {
        addClass: fn,
        removeClass: function () {console.log('removed';}
    };
});

Little trick, so, but this prototype was missing from all the documentation and tutorial i found since now. Enjoy your third-party libraries animations with Angular.

Collectives™ on Stack Overflow

Custom AngularJS animation with third-party javascript libraries

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related