AngularJS Animation
AngularJS provides animation, you can use with CSS.
AngularJS animation need to introduce angular-animate.min.js library.
<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
It should be used in the application model ngAnimate:
<body ng-app="ngAnimate">
What is animation?
Animation is dynamic effects by altering the HTML element produced.
Examples
Select the check box to hide DIV:
Hide DIV: <input type = "checkbox " ng-model = "myCheck">
<Div ng-hide = "myCheck "> </ div>
</ Body>
try it"
Animation applications not too much, but appropriate use of animation can increase the richness of the page, or you can allow users to more easily understand. |
If we apply the name of the application has been set up, you can put ngAnimate added directly in the model:
Examples
<H1> Hide DIV: <input type = "checkbox " ng-model = "myCheck"> </ h1>
<Div ng-hide = "myCheck "> </ div>
<Script>
try it"
ngAnimate done?
ngAnimate model can add or remove class.
ngAnimate model does not make animate HTML elements, but ngAnimate will monitor the event, similar to the hidden display HTML elements, if an event occurs ngAnimate will use the predefined class 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
ng-show
and ng-hide
command for adding or removing ng-hide
the value of the class.
Other instructions will be added into the DOM ng-enter
class, remove DOM will add ng-leave
property.
When the HTML element position changes, ng-repeat
command can also add ng-move
type.
In addition, after completion, class collection of HTML elements will be removed. For example: ng-hide
command will add about class:
-
ng-animate
-
ng-hide-animate
-
ng-hide-add
(if the element will be hidden) -
ng-hide-remove
(if the element is displayed) -
ng-hide-add-active
(if the element is hidden) -
ng-hide-remove-active
(if the element is displayed)
Using CSS Animation
We can use CSS transition (transition) or CSS animation that animate HTML elements, the part you can see our CSS transition tutorial , CSS animation tutorial .
CSS Transitions
CSS allows us a smooth transition to a CSS property value changed to another:
Examples
In the DIV element sets .ng-hide
class, the transition takes 0.5 seconds, the height from 100px to 0:
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</ Style>
try it"
CSS Animation
CSS animation allows you to smooth modify CSS property values:
Examples
In the DIV element sets .ng-hide
-time class, myChange
animation is executed, it will be smooth height from 100px to 0:
@keyframes myChange {
from {
height: 100px;
} To {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</ Style>
try it"