Shulou(Shulou.com)06/03 Report--

This article mainly introduces the use of the ngAnimate plug-in, the article is very detailed, has a certain reference value, interested friends must read it!

What does the ngAnimate plug-in do?

The ngAnimate plug-in, as its name suggests, animates elements.

How to define animation?

The first step must be to introduce plug-ins

The second step is to let app introduce (rely on) this plug-in

Var appH5=angular.module ("app", ['ngAnimate']); appH5.controller ("myTabCtrl", [' $scope',function ($scope) {$scope.isShow=true;}]) I am the first way to add animation to the elements I want to animate: define the example through the style of css3.0. New-item {padding: 10px; border-bottom: 1px solid # ededed; font-size: 1.5remr; position: relative; transition:all 0.5s } / * the element enters the initial state of the page * / .new-item.ng-enter {top: 10px;} / * the final state after entering the page animation * / .new-item.ng-enter-active {top: 0px;} / * the element moves out of the initial state of the page * / .new-item.ng-leave {opacity:1;} / * the final state * / .new-item.ng-leave-active {opacity:0 after removal from the page animation } / / html I am the element to be animated

Why can animation be produced by adding styles?

When the element enters the page, angular will add class ng-enter and ng-enter-active to the element in turn. As we all know, after CSS3.0 defines transition in one element, the attribute values of the two same attributes will be changed with transition animation. The same is true when an element removes a page, so we just define the four class of the element to define the state of the four points in time, and let angular do the rest.

What are the instructions that support defining animation in this way?

Ng-if 、 ng-view 、 ng-repeat 、 ng-include 、 ng-switch

These instructions realize the display and hiding of elements by creating and removing nodes.

The differences of ng-repeat

.new-item {padding: 10px; border-bottom: 1px solid # ededed; font-size: 1.5remt; position: relative; transition:all 0.5s;} .new-item.ng-enter {top: 10px;} .new-item.ng-enter-active {top: 0px;} .new-item.ng-enter-stagger {/ * ng-repeat provides this style to implement the sequential execution of an animation * / animation-delay:100ms for each item entry -webkit-animation-delay:100ms;} .new-item.ng-leave {opacity:1;} .new-item.ng-leave-active {opacity:1;} .new-item.ng-leave-stagger {animation-delay:100ms;-webkit-animation-delay:100ms;} / html {{new.title}}

Just said that through the new and delete elements to achieve the instructions can be animated, then just change the style to show or hide the element instructions (ng-show ng-hide ng-class) can be animated?

/ * element hides the initial state * / .new-item.ng-hide-add {opacity:1;} / * hides the final state after operation animation * / .new-item.ng-hide-add-active {opacity:0;} / * element shows the initial state * / .new-item.ng-hide-remove {top: 10px;} / * shows the final state after operation animation * / .new-item.ng-hide-remove-active {top: 0px;}

The second way to add animation: through js

/ / ng-if, ng-view, ng-repeat, ng-include, ng-switch instructions appH5.animation (".new-item", function () {return {leave:function (element,done) {/ / the first parameter is the element of the motion, and the second parameter is the callback after the completion of the animation, which must be called If not called, the instruction function will not execute $(element) .animate ({width:0,height:0}, 1000 done) / with jQuery}, enter:function (element,done) {$(element) .css ({width:100,height:100}); / with jQuery $(element) .animate ({width:100,height:100}, 1000 done) / / with jQuery}}) / / ng-show ng-hide ng-class instruction appH5.animation (".new-item", function () {return {addClass:function (element,sClass,done) {/ / the first parameter is the element of the motion / / the second parameter is the style of the element-- > generally not needed / / the third parameter is the callback after the completion of the animation and must be called If not called, the instruction function will not execute $(element) .animate ({width:0,height:0}, 1000 done)}, removeClass:function (element,sClass,done) {$(element) .css ({width:100,height:100}) $(element). Animate ({width:100,height:100}, 1000 done)}}); that's all of the article "what's the use of the ngAnimate plug-in?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.