The best AngularJS Animation Tutorial In 2024, In this tutorial you can learn What is animation?,ngAnimate done?,Using CSS Animation,CSS Transitions,CSS Animation,
AngularJS provides animation, you can use with CSS.
AngularJS animation need to introduce angular-animate.min.js library.
<script src="http://cdn.static.w3write.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">
Animation is dynamic effects by altering the HTML element produced.
Select the check box to hide DIV:
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:
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) 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 allows us a smooth transition to a CSS property value changed to another:
In the DIV element sets .ng-hide
class, the transition takes 0.5 seconds, the height from 100px to 0:
CSS animation allows you to smooth modify CSS property values:
In the DIV element sets .ng-hide
-time class, myChange
animation is executed, it will be smooth height from 100px to 0: