How to organize consecutive animations in AngularJS?

Question

JavaScript

I create js animations in an angular project in the usual way:

angular.module('animations', [])
    .animation(".slideshowAnimation", function () {
        return {
            leave: function (element, done) { /* leave-animation */ },
            enter: function (element, done) { /* enter-animation */ }
        };
    });

But in this case, when m / d routes transitions, all animations on the page are performed simultaneously. And I need several elements on the page to animate one after another during transitions. Tell me how can this be done?

Answer 1

You can specify transition-delay in animation classes so that the next animation starts when the previous one ends.
The same can be done programmatically, in the enter or addClass animation function.
Well, in the end, the animation itself can be launched programmatically, for example, by an event generated at the end of the previous animation. See $animate