Home > Developer > Web Develop
Directory
ng Animations actually help us to animate by adding a specific style to the state switch.
In general, we will use C3 to achieve specific animation.
CSS definition Ng-ifFigure (In fact, the graph does not show what):
Html
<body ng-app= "myApp" > <button ng-click= "show=!show" >Toggle</button> <div ng-if= "show "Class=" Fade ">look me</div> <script type=" Text/javascript "> angular.module (' myApp ', [' Nganimate ']) </script></body>Css
. Fade { transition:1s linear all; } . fade.ng-enter { opacity:0; } . fade.ng-enter.ng-enter-active { opacity:1; } . Fade.ng-leave { opacity:1; } . fade.ng-leave.ng-leave-active { opacity:0; }Enter and leave the execution process:
When the element is created, the. Ng-enter,. Ng-enter-active class is added in turn, and then the default class is restored.
Also at the time of destruction, the. Ng-leave,. Ng-leave-active class is added in turn, and then reverts to default.
NgclassOnly the key code is intercepted here.
<button ng-click= "Onoff=!onoff" >Toggle</button> <div ng-class= "{on:onoff}" class= "Highlight" > Highlight this box </div>Css
. highlight { transition:1s linear all; } . Highlight.on-add { background:red; } . Highlight.on { background:yellow; } . highlight.on-remove { background:blue; }:
1.5.8 supported instruction and animation styles:
| Directive | Supported animations |
|---|---|
| {@link ng.directive:ngrepeat#animations Ngrepeat} | Enter, leave and move |
| {@link ngroute.directive:ngview#animations Ngview} | Enter and leave |
| {@link ng.directive:nginclude#animations Nginclude} | Enter and leave |
| {@link ng.directive:ngswitch#animations Ngswitch} | Enter and leave |
| {@link ng.directive:ngif#animations Ngif} | Enter and leave |
| {@link ng.directive:ngclass#animations Ngclass} | Add and remove (The CSS class (es) present) |
| {@link ng.directive:ngshow#animations Ngshow} & {@link ng.directive:nghide#animations nghide} | Add and remove (the Ng-hide class value) |
| {@link ng.directive:form#animation-hooks form} & {@link ng.directive:ngmodel#animation-hooks Ngmodel} | Add and remove (dirty, pristine, valid, invalid & all other validations) |
| {@link module:ngmessages#animations ngmessages} | Add and Remove (Ng-active & ng-inactive) |
| {@link module:ngmessages#animations Ngmessage} | Enter and leave |
Html
<body ng-app= "myApp" ng-init= "items=[1,2,3,4,5,6" "> <button ng-click=" Show=!show ">toggle</ button> <div ng-if= "show" ng-repeat= "item in Items" class= "Slide" > {{item}} </div></ Body>JS operation
Angular.module (' myApp ', [' nganimate ']) . Animation ('. Slide ', [ function () { return { enter:function (element, Donefn) { jquery (Element). FadeIn (Donefn); }, move:function (element, donefn) { jquery (element). FadeIn (DONEFN); }, leave:function (element, donefn) { jQuery (Element). FadeOut (Donefn); } } } ]);Where the Enter move leave corresponds to the event of a state change, the details are suggested in the source code for the $ $AnimateJsProvider.
This address: http://www.cnblogs.com/neverc/p/5924789.html
[AngularJS] ANGULARJS Series (5) Animation of intermediate text
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
