AngularJs Animations

Animations

Usage

[Style Y210]

• Use subtle animations with AngularJS to transition between states for views and primary visual elements. Include the ngAnimate module. The 3 keys are subtle, smooth, seamless.

  Why?: Subtle animations can improve User Experience when used appropriately.

  Why?: Subtle animations can improve perceived performance as views transition.

Sub Second

[Style Y211]

• Use short durations for animations. I generally start with 300ms and adjust until appropriate.

  Why?: Long animations can have the reverse affect on User Experience and perceived performance by giving the appearance of a slow application.

animate.css

[Style Y212]

• Use animate.css for conventional animations.

  Why?: The animations that animate.css provides are fast, smooth, and easy to add to your application.

  Why?: Provides consistency in your animations.

  Why?: animate.css is widely used and tested.

  Note: See this great post by Matias Niemelä on AngularJS animations