AngularJS animation
AngularJS provides animation effects that can be used with CSS.
AngularJS uses animations to introduce the angular-animate.min.js library.
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
You also need to use the model ngAnimate in your application:
<body ng-app="ngAnimate">
What is animation?
Animation is a dynamic change effect generated by changing HTML elements.
Example
Check the check box to hide DIV:
<!DOCTYPE html><html><head><meta charset="utf-8"><style>div { transition: all linear 0.5s; background-color: lightblue; height: 100px; width: 100%; position: relative; top: 0; left: 0;}.ng-hide { height: 0; width: 0; background-color: transparent; top:-200px; left: 200px;}</style><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script></head><body ng-app="ngAnimate"><h1>Hide DIV: <input type="checkbox" ng-model="myCheck"></h1><div ng-hide="myCheck"></div></body></html>Running effect:
Note: There should not be too many animations in the application, but appropriate use of animations can increase the richness of the page and make it easier for users to understand.
If our application has already set the application name, we can add ngAnimate directly to the model:
Example
<!DOCTYPE html><html><head><meta charset="utf-8"><style>div { transition: all linear 0.5s; background-color: lightblue; height: 100px; width: 100%; position: relative; top: 0; left: 0;}.ng-hide { height: 0; width: 0; background-color: transparent; top:-200px; left: 200px;}</style><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script></head><body ng-app="myApp"><h1>Hide DIV: <input type="checkbox" ng-model="myCheck"></h1><div ng-hide="myCheck"></div><script>var app = angular.module('myApp', ['ngAnimate']);</script></body></html>Running effect:
What did ngAnimate do?
The ngAnimate model can add or remove class.
The ngAnimate model cannot animate HTML elements, but ngAnimate will monitor events, similar to hiding and displaying HTML elements. If an event occurs, ngAnimate will use a predefined class to animate HTML elements.
AngularJS directive to add/remove class:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
The ng-show and ng-hide directives are used to add or remove the value of ng-hide class.
Other directives will add the ng-enter class when entering the DOM, and remove the DOM will add the ng-leave property.
When the HTML element position changes, the ng-repeat directive can also add the ng-move class.
Additionally, after the animation is complete, the class collection of HTML elements will be removed. For example: The ng-hide directive will add the following class:
ng-animate
ng-hide-animate
ng-hide-add (if the element will be hidden)
ng-hide-remove (if the element will be displayed)
ng-hide-add-active (if the element will be hidden)
ng-hide-remove-active (if the element will be displayed)
Using CSS animation
We can use CSS transition or CSS animation to make HTML elements animate. You can refer to our CSS transition tutorial and CSS animation tutorial.
CSS Transition
The CSS transition allows us to smoothly modify one CSS attribute value to another:
Example
When the DIV element has the .ng-hide class set, the transition takes 0.5 seconds, and the height changes from 100px to 0:
<!DOCTYPE html><html><head><meta charset="utf-8"><style>div { transition: all linear 0.5s; background-color: lightblue; height: 100px;}.ng-hide { height: 0;}</style><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script></head><body ng-app="myApp"><h1>Hide DIV: <input type="checkbox" ng-model="myCheck"></h1><div ng-hide="myCheck"></div><script>var app = angular.module('myApp', ['ngAnimate']);</script></body></html>CSS animation
CSS animation allows you to smoothly modify CSS property values:
Example
When the .ng-hide class is set on the DIV element, the myChange animation will be executed, which will smoothly change the height from 100px to 0:
<!DOCTYPE html><html><head><meta charset="utf-8"><style>@keyframes myChange { from { height: 100px; } to { height: 0; }}div { height: 100px; background-color: lightblue;}div.ng-hide { animation: 0.5s myChange;}</style><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script></head><body ng-app="ngAnimate">Hide DIV: <input type="checkbox" ng-model="myCheck"><div ng-hide="myCheck"></div></body></html>The above is a collection of information about AngularJS animations. Please refer to it if you need it.