Objective
ANGULARJS provides an animated effect that can be used with CSS. Angularjs use animations to introduceangular-animate.min.jslibraries.
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js" ></script>
You also need to use the model in your applicationngAnimate:
<body ng-app= "Nganimate" >
1, what is animation?
Animation is the dynamic effect of 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 already set the application name, we can add it directly to thengAnimatemodel:
<!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?
ngAnimateThe model can add or remove class. ThengAnimatemodel does not animate HTML elements, but itngAnimatemonitors events, similar to hidden display HTML elements, andngAnimateuses predefined classes to animate HTML elements if the event occurs.AngularJSAdd/Remove class instruction:ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch.
(1), ng-class the CSS class used by the specified HTML element
ng-classDirective is used to dynamically bind one or more CSS classes to HTML elements.ng-classthe value of the 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 the key-value pair, thekey is a Boolean value , and value is the name of the class you want to add. The class is added only if the key is true . If it is an array, it can consist of a combination of strings or objects, and the elements of an 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 similar to Ng-class, but only in even-numbered rows; ng-class-odd is similar to Ng-class, but only works on odd-numbered 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" border="1px">
<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 to remove the HTML element
ng-ifDirective is used to remove an HTML element when an expression is false. If the IF statement executes a result that is true, the removal element is added and displayed.ng-ifdirectives are differentng-hideng-hidefrom, hiding elements, andng-ifremoving 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 you select the check box again, the div element reappears. </p> </body> </html>
(4), ng-checked to specify whether the element is selected
ng-checkedDirective is used to set the Checked property of a check box (checkbox) or radio button (radio). Ifng-checkedthe property returns True, the check box (checkbox) or radio button (radio) is 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">Mercedes <h3>Click "check all" to select all cars. </h3> </body> </html>
3. Use CSS animation
We can use CSS transition (transitions) or CSS animations to animate HTML elements.
(1), CSS transition
CSS transitions allow us to smoothly modify a CSS property value to another: When the DIV element is set to a.ng-hideclass, 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 animations allow you to modify CSS property values smoothly: When the DIV element is set to the.ng-hideclass, themyChangeanimation executes, and it smoothes 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 about the whole content of Angularjs animation, this article summarizes very detailed, and provides the example code, hope to learn some angularjs everybody to have the help
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
