Как организовать последовательные анимации в AngularJS?

Question

[KlimMalgin]

Создаю js-анимации в angular-проекте обычным способом:

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

Но в этом случае при переходах м/д роутами все анимации на странице выполняются одновременно. А мне нужно чтобы несколько элементов на странице при переходах анимировались друг за другом. Подскажите, как можно это сделать?

Answer 1

[Руслан Лопатин]

Можно в классах анимации указать transition-delay так, чтобы следующая анимация начиналасть, когда предыдущая закончится.

То же самое можно сделать программно, в функции enter или addClass анимации.

Ну и, в конце концов, саму анимацию можно запускать программно, например по событию, генерируемому по завершении предыдущей анимации. Смотрите $animate