Angular ui-router, анимирующий изменения дочернего состояния, но не внук

У меня есть угловое приложение с основным абстрактным представлением и вложенными дочерними представлениями. Один из дочерних элементов основного представления также является абстрактным с собственными дочерними представлениями.

Когда я меняю дочерние состояния основного родителя, анимация работает нормально, но когда я меняю состояния внуков, анимации нет.

Глядя на инструменты разработчика, я вижу, что классы ng-enter и ng-leave добавляются при изменении дочерних состояний, но не при изменении внуков.

Вот плункер, демонстрирующий поведение.


angularjs angular-ui-router ng-animate
person Grant Jordan    schedule 10.05.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это связано с тем, как написаны ваши правила CSS, вы получаете ui-view с селектором атрибутов для .ng-enter и ng-leave, но объявляете директиву ui view и как элемент, и как атрибут в вашем html. поэтому вы должны сделать что-то вроде этого:

ui-view.ng-enter, [ui-view].ng-enter { // animation }

Вот рабочая вилка вашего plunkr.

person RocketsRockets    schedule 10.05.2016
comment
Спасибо, что указали, что я использовал ui-view как атрибут и как элемент, я никогда не замечал. С этой информацией я понял, что могу внести предложенные вами изменения css или просто изменить объявление ui-view на атрибуты, чтобы оно соответствовало моему css, и все хорошо. Спасибо еще раз! - person Grant Jordan; 10.05.2016