Angular-animation ., Angular-Animation
What is the ngAnimate plug-in?
The ngAnimate plug-in provides animations for elements like its name.
How to define an animation?The first step must be to introduce the plug-in
<script src="//cdn.bootcss.com/angular.js/1.3.20/angular.js"></script><script src="//cdn.bootcss.com/angular.js/1.3.20/angular-animate.min.js"></script>
Step 2 let the app introduce (dependency) This plug-in
Var appH5 = angular. module ("app", ['nganimate']); appH5.controller ("myTabCtrl", ['$ scope', function ($ scope) {$ scope. isShow = true;}]) <body ng-controller = "myTabCtrl"> <input type = "checkbox" ng-model = "isShow"/> <div class = "new-item" ng-if =" isShow "> I am the element to be animated </div> </body> the first way to add an animation: sample style definition using css3.0. new-item {padding: 10px; border-bottom: 1px solid # ededed; font-size: 1.5rem; position: relative; transition: all 0.5 s ;} /* The element enters the initial state of the page */. new-item.ng-enter {top: 10px;}/* final state after entering the page animation */. new-item.ng-enter-active {top: 0px;}/* element removal page initial state */. new-item.ng-leave {opacity: 1;}/* final state after removing the page animation */. new-item.ng-leave-active {opacity: 0;} // html <div class = "new-item"> I am the element to be animated </div>
. New-item {padding: 10px; border-bottom: 1px solid # ededed; font-size: 1.5rem; position: relative; transition: all 0.5 s ;}. new-item.ng-enter {top: 10px ;}. new-item.ng-enter-active {top: 0px ;}. the new-item.ng-enter-stagger {/* ng-repeat provides this style to execute an animation in sequence for each item entry */animation-delay: 100 ms;-webkit-animation-delay: 100 ms ;}. new-item.ng-leave {opacity: 1 ;}. new-item.ng-leave-active {opacity: 1 ;}. new-item.ng-leave-stagger {animation-delay: 100 ms;-webkit-animation-delay: 100 ms ;} // html <div class = "new-item" ng-repeat = "new in news" >{{ new. title }}</div>
Just now, commands implemented by creating and deleting elements can be animated, so they only need to change the style display or hide the elements (ng-show ng-hide ng-class) can it be animated?
/* Hide the initial state of an element */. new-item.ng-hide-add {opacity: 1;}/* Hide the final state after the operation animation */. new-item.ng-hide-add-active {opacity: 0;}/* element displays initial state */. new-item.ng-hide-remove {top: 10px;}/* displays the final state after the action animation */. new-item.ng-hide-remove-active {top: 0px ;}
The second way to add an animation: Through js
// Ng-if, ng-view, ng-repeat, ng-include, and ng-switch commands appH5.animation (". new-item ", function () {return {leave: function (element, done) {// The first parameter is the moving element, and the second parameter is the callback after the animation is completed, it must be called. If it is not called, the command function will not execute $ (element ). animate ({width: 0, height: 0}, 1000, done); // use jQuery}, enter: function (element, done) {detail (element).css ({width: 100, height: 100}); // use jQuery $ (element ). animate ({width: 100, height: 100}, 1000, done) // use jQuery }}}); // ng-show ng-hide ng-class command appH5.animation (". new-item ", function () {return {addClass: function (element, sClass, done) {// The first parameter is the moving element // The second parameter is the element style --> generally, it is not used. // The third parameter is the callback after the animation is completed and must be called, if the command is not called, $ (element) is not executed ). animate ({width: 0, height: 0}, 1000, done)}, removeClass: function (element, sClass, done) {detail (element).css ({width: 100, height: 100}); $ (element ). animate ({width: 100, height: 100}, 1000, done )}}});
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
