Как анимировать дочерние элементы, когда ngClass изменяется на родительском

Question

Можно ли определить переходы на дочерних элементах и ​​учесть ли их ngAnimate при изменении ngClass для родительских элементов?

До сих пор я не смог этого сделать.
http://plnkr.co/edit/ulq1MQNDtY9cO2pcjdzF?p=preview

Благодарю.

Answer 1

Я не думаю, что это возможно, как вы пытаетесь это сделать. Angular ищет свойства анимации / перехода в базовом классе для определения времени. Но в вашем случае у вас все эти свойства определены на дочернем элементе. В результате Angular не может подключить необходимые анимационные хуки.

Что вы можете сделать, это предоставить подсказку для Angular, когда должны выполняться шаги анимации. Как это:

.container {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

Это просто дублированные стили перехода, которые сообщают Angular все, что ему нужно о вашем переходе.

Демо- версия

Выглядит как предоставление transition-duration: 1s здесь только важная часть, так что это может быть:

.container {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}