Angular 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

Что касается анимации Angular, то год Му - ваш лучший друг. Это блог от автора ngAnimate Матиаса Нимелы.

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

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