Angular CSS ngAnimate translated to developer

Question

ngAnimate when used with routings has different "CSS Styles" that can be set to produce different transitions.

Is this the correct template that will cover all CSS Options for a transition?

myAnimation = represent my css template.

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

Is there any guide or documentation on what is being affect and when?

I have been playing with those for a while and I still do not understand the role each of those CSS items and the role they play in the animation and I am referring to the " despairing view " and the " new view" . I understand this involves understanding CSS as well but what I am looking for is to understand this using the simplest CSS... something a developer could use to evolve from there.

Answer 1

When it comes to Angular animations, year of moo is your best friend. This is the blog from the author of ngAnimate Matias Niemela.

I would start off with this post: Remastered Animation in AngularJS 1.2 , but do check out his other posts like Staggering Animations in AngularJS and others .

Remastered Animation in AngularJS 1.2 really covers 99% of what you need to know about animations in angular and provides explanations and examples on CSS Transitions, CSS Keyframe Animations, as well as JavaScript Animations for all the build-in Angular directive that supports animations out of the box: ngView, ngInclude, ngIf, ngSwitch, ngClass, ngShow, ngHide as well as how to apply it on your own custom directives.