Preface
AngularJS provides animation effects that can be used with CSS. AngularJS requires the introduction of angular-animate.min.js library when using animation.
<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">
1. What is animation?
Animation is a dynamic change effect generated by changing HTML elements.
<!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="js/angular.min.js"></script><script src="js/angular-animate.min.js"></script></head><body ng-app="ngAnimate"><h3>Hide DIV: <input type="checkbox" ng-model="myCheck"></h3><div ng-hide="myCheck"></div></body></html> If our application has set the application name, we can add ngAnimate directly to the model:
<!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="js/angular.min.js"></script><script src="js/angular-animate.min.js"></script></head><body ng-app="myApp"><h3>Hide DIV: <input type="checkbox" ng-model="myCheck"></h3><div ng-hide="myCheck"></div><script>var app = angular.module('myApp', ['ngAnimate']);</script></body></html>2. 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 directives to add/remove class: ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch .
(1) ng-class specifies the CSS class used by HTML elements
The ng-class directive is used to dynamically bind one or more CSS classes to HTML elements. The value of the ng-class directive can be a string, an object, or an array. If it is a string, multiple class names are separated by spaces. If it is an object, you need to use a key-value pair, which is a boolean value , and the value is the class name you want to add. The class will only be added if the key is true . If it is an array, it can be composed of strings or combinations of objects, and the elements of the array can be strings or objects.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script><script src="js/angular-animate.js"></script><style>.sky { color:white; background-color:lightblue; padding:20px; font-family:"Courier New";}.tomato { background-color:coral; padding:40px; font-family:Verdana;}</style></head><body ng-app=""><span>Select a class:</span><select ng-model="home"><option value="sky">Sky color</option><option value="tomato">Tomato color</option></select><div ng-class="home"> <h3>Welcome Home!</h3> <h4>I like it!</h4></div></body></html>(2) ng-class-even is similar to ng-class, but only works on even lines; ng-class-odd is similar to ng-class, but only works on odd lines; ng-class-odd is similar to ng-class, but only works on odd lines;
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script><style>.stripedeven { color:white; background-color:cyan;}.stripedodd{ color:white; background-color:yellowgreen;}</style></head><body ng-app="myApp"><table ng-controller="myCtrl"><tr> <th>Name</th> <th>Country</th></tr><tr ng-repeat="x in records" ng-class-even="'stripedeven'" ng-class-odd="'stripedodd'"> <td>{{x.Name}}</td> <td>{{x.Country}}</td> </tr></table><script>var app = angular.module("myApp", []);app.controller("myCtrl", function($scope) { $scope.records = [ { "Name" : "Alfreds Futterkiste", "Country" : "Germany" }, { "Name" : "Berglunds snabbk", "Country" : "Sweden" }, { "Name" : "Centro comercial Moctezuma", "Country" : "Mexico" }, { "Name" : "Ernst Handel", "Country" : "Austria" } ]});</script></body></html>(3) ng-if if the condition is false Remove HTML elements
ng-if directive is used to remove HTML elements when the expression is false. If the result of the execution of the if statement is true, the removed element will be added and displayed. ng-if directive is different from ng-hide , ng-hide hides elements, while ng-if removes elements from the DOM.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script></head><body ng-app="" ng-init="myVar = true"><h3>Keep HTML: <input type="checkbox" ng-model="myVar" ></h3><div ng-if="myVar"><h1>Welcome</h1><p>Welcome to my home.</p><hr></div><p>The DIV element is removed when the check box is unchecked. </p><p>When the check box is re-selected, the DIV element will be re-displayed. </p></body></html>
(4) ng-checked specifies whether the element is selected
The ng-checked directive is used to set the checked properties of a checkbox or radio button. If ng-checked property returns true, the checkbox or radio button will be selected.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script></head><body ng-app=""> <h3>My cars:</h3> <input type="checkbox" ng-model="all"> Check all<br> <input type="checkbox" ng-checked="all">Volvo<br> <input type="checkbox" ng-checked="all">Ford<br> <input type="checkbox" ng-checked="all">Ford<br> <input type="checkbox" ng-checked="all"> ng-checked="all">Mercedes <h3>Click "Check all" to select all cars. </h3></body></html>
3. Use CSS animation
We can use CSS transition or CSS animation to make HTML elements animate.
(1) CSS transition
CSS transition allows us to smoothly modify one CSS attribute value to another: when .ng-hide class is set on the DIV element, the transition takes 0.5 seconds and the height changes from 100px to 0.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script><script src="js/angular-animate.min.js"></script><style>div { transition: all linear 0.5s; background-color: lightblue; height: 100px;}.ng-hide { height: 0;}</style></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>(2) CSS animation
CSS animation allows you to smoothly modify CSS attribute values: When .ng-hide class is set on the DIV element, myChange animation will be executed, and it will smoothly change the height from 100px to 0.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>angularJs</title><script src="js/angular.min.js"></script><script src="js/angular-animate.min.js"></script><style>@keyframes myChange { from { height: 100px; } to { height: 10; }}div { height: 100px; background-color: lightblue;}div.ng-hide { animation: 10s myChange;}</style></head><body ng-app="ngAnimate">Hide DIV: <input type="checkbox" ng-model="myCheck"><div ng-hide="myCheck"></div></body></html>Summarize
The above is all about AngularJS animation. This article summarizes it in detail and provides example code. I hope it will be helpful to everyone who learns some AngularJS.