Угловая CSS ngAnimate, переведенная разработчику

Question

ngAnimate При использовании с маршрутизацией имеет разные «стили CSS», которые можно настроить для создания разных переходов.

Это правильный шаблон, который будет охватывать все варианты CSS для перехода?

myAnimation = представляют мой шаблон CSS.

.myAnimation {} 
.myAnimation.ng-enter {} 
.myAnimation.ng-enter-active {} 
.myAnimation.ng-leave {} 
.myAnimation.ng-leave-active {} 

Есть ли руководство или документацию о том, что в настоящее время влияют и когда?

Я играл с теми, на некоторое время, и я до сих пор не понимают роль каждого из этих элементов CSS и роли, которую они играют в анимации, и я имею в виду «отчаянным видом» и " новый вид ". Я понимаю, что это связано с пониманием CSS, но я ищу, чтобы понять это, используя простейший CSS ... то, что разработчик мог бы использовать, чтобы развиваться оттуда.

Answer 1

Когда речь идет об Угловой анимации, year of moo - твой лучший друг. Это блог от автора ngAnimate Матиаса Нимелы.

Я бы начал с этого поста: Remastered Animation in AngularJS 1.2, но делаю другие записи, такие как Staggering Animations in AngularJS и others.

Remastered Animation in AngularJS 1.2 действительно покрывает 99% того, что вам нужно знать об анимациях в угловом режиме, а также дает объяснения и примеры в CSS-переходах, анимации ключевого кадра CSS, а также анимации JavaScript для всех встроенных угловых директив, поддерживающих анимацию из в поле: ngView, ngInclude, ngIf, ngSwitch, ngClass, ngShow, ngHide, а также как применить его по вашим собственным пользовательским директивам.