AngularJS Animations - How to add Animation in AngularJS
Published August 13, 2022When a change to an HTML element creates the appearance of motion, which is an animation. In the ngAnimate module, application classes add and remove the function. The ngAnimate module does not animate your HTML elements, but when it detects specific events, such as the hiding or revealing of an HTML element. It gives that element some pre-defined classes that can be used to create animations.
In AngularJS, the following directives can create, remove and operate classes:
-
ng-show
-
ng-hide
-
ng-class
-
ng-view
-
ng-include
-
ng-repeat
-
ng-if
-
ng-switch
Adding or removing a value for the ng-hide class is done using the ng-show and ng-hide directives.
When one of the other directives enters the DOM, it adds the ng-enter class value, and when it exits, it adds the ng-leave attribute.
When the HTML element changes positions, the ng-repeat directive adds value to the ng-move class.
The HTML element will also have a set of class values during the animation, which will be deleted once it is over. An illustration of the class values that the ng-hide directive will add is:
-
ng-animate
-
ng-hide-animate
-
ng-hide-add
-
ng-hide-remove
-
ng-hide-add-active
-
ng-hide-remove-active
Syntax
The following file helps to operate the animation with AngularJS.
|
<head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script> </head> |
The following syntax shows the animation with AngularJS.
|
<body ng-app="ngAnimate"> </body> |
Example
The following example shows the animation with AngularJS.
|
<!DOCTYPE html> <html> <style> div { transition: all linear 0.5s; background-color: lightgrey; height: 50px; width: 50%; position: relative; top: 0; left: 0; } .ng-hide { background-color: transparent; top:-250px; left: 250px; }
</style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script> <h3> AngularJS Animation </h3> <body ng-app="ngAnimate"> <h5>Click here... <input type="checkbox" value="click here..." ng-model="myHide"> </h5> <div ng-hide="myHide"> <p> AngularJS Animation </p> </div> </body> </html> |
Output1: unchecked checkbox
 |
Output2: checked checkbox
 |
Summary
The AngularJS Animation helps to provide animated effects in the web application's function. It gives attractive, user-friendly, stylish web applications using AngularJS animation directives
|
Article Contributed By :
|
|
|
|
|
199 Views |
|