Angularjs Animation
ANGULARJS provides an animated effect that can be used with CSS.
Angularjs use animations to introduce angular-animate.min.js libraries.
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js" ></script>
You also need to use model Nganimate in your application:
<body ng-app= "Nganimate" >
What is animation?
Animation is the dynamic effect of changing HTML elements.
Instance
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>
Operation Effect:
Note: the application of animation should not be too much, but the appropriate use of animation can increase the richness of the page, but also easier to let users understand.
If our application has already set the application name, we can add nganimate directly to the model:
Instance
<!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>
Operation Effect:
What did Nganimate do?
Nganimate model can add or remove class.
The nganimate model does not animate HTML elements, but nganimate monitors events such as hiding HTML elements and, if events occur, Nganimate uses predefined classes to animate HTML elements.
Angularjs Add/Remove class instruction:
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 values from the Ng-hide class.
Other directives add Ng-enter classes as they enter the DOM, and removing the DOM adds Ng-leave attributes.
The Ng-repeat directive can also add ng-move classes when the position of the HTML element changes.
Also, after the animation completes, the collection of classes for the HTML element is removed. For example: The ng-hide directive adds a class:
Ng-animate
Ng-hide-animate
Ng-hide-add (if element will be hidden)
Ng-hide-remove (if the element will be displayed)
Ng-hide-add-active (if element will be hidden)
Ng-hide-remove-active (if the element will be displayed)
Using CSS animations
We can use CSS transition (transitions) or CSS animations to animate HTML elements, which you can see in our CSS transition tutorials, CSS animation tutorials.
CSS transitions
CSS transitions allow us to smoothly modify a CSS property value to be another one:
Instance
When the DIV element sets the. Ng-hide class, 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 animations allow you to modify CSS property values smoothly:
Instance
When the DIV element sets the. Ng-hide class, the Mychange animation executes, and it smoothes 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 the Angularjs animation data collation, the need for small partners under the reference.
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
