2

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.

Dalorzo
  • 19,834
  • 7
  • 55
  • 102

1 Answers1

6

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.

Beyers
  • 8,968
  • 43
  • 56