HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
AngularJS provides animation, you can use with CSS.
AngularJS animation need to introduce angular-animate.min.js library.
<script src="#"></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: