Search within TutorialsPark

AngularJS CSS Animation


Learn how to use AngularJS to apply CSS Animations


AngularJS CSS Animation

AngularJS Animation feature enables the user to attach specific CSS style class for animating content changes within the DOM, using directives within the application. Eg: ngRepeat , ngHide , ngShow etc.

To begin with you need to add angularJS animation resource file angular-animate.js to the application.

AngularJS animation uses CSS transition to animate specific events, e.g say elements are generated via ngRepeat or when something is shown/hidden via directive ngShow.

Below is a table of directives and and the events supported by AngularJS Animation

Table: AngularJS Animation supporting Directive and Events

Event From To Directives
Enter .ng-enter .ng-enter-active ngRepeat, ngInclude, ngIf, ngView
Leave .ng-leave .ng-leave-active ngRepeat, ngInclude, ngIf, ngView
Hide
Show
.ng-hide-add
.ng-hide-remove
.ng-hide-add-active
.ng-hide-remove-active
ngShow, ngHide
ngShow, ngHide
Hide
Show
.ng-move
.CLASS-add-class
.ng-move-active
.CLASS-add-class-active
ngClass
removeClass .CLASS-remove-class .CLASS-remove-class-active ngClass

Based on the table, every time a change happens in the DOM(Document Object Model), related css class is attached while the transition is in motion.

Eg: If an element is generated using directive ngRepeat , the class .ng-enter is attached to the element until the transition is complete, and after completion css class .ng-enter-active is attached as well.


AngularJS Animation : Using Directive ngRepeat

In the demo, CSS animation classes are added when the event enter of directive ngRepeat is triggered.

Example : AngularJS CSS Animation ngRepeat

Give it a TRY! » Note: Everytime a new element is generated, it appears with 5sec transition delay

AngularJS Animation : Using Directive ngIf

In the demo, CSS animation classes are added when the event enter of directive ngIf is triggered.

Example : AngularJS CSS Animation ng-if

Give it a TRY! » Note: The content is shown with the animation

AngularJS Animation : Using Directive ngHide

In the demo, CSS animation classes are added when the event hide of directive ngHide is triggered.

Example : AngularJS CSS Animation ngHide

Give it a TRY! » Note: The image is show and hidden with the fade-in animation and transition delay

AngularJS Animation : Using Directive ngClass

In the demo, CSS animation classes are added when the event add-class of directive ngRepeat is triggered.

Example : AngularJS CSS Animation ngClass

Give it a TRY! » Note: Animation is applied when class is applied