This article covers the animation application part of Angular.

First, Angular doesn’t provide animation. You need to add ngAnimate to your project to make Angular animation work. Angular also doesn’t provide specific animation styles, so there’s a lot of freedom and customizability.

So, you need to start by importing the Angular framework (angular.js) in the entry HTML file of your project, and then importing angular.animate.

In the project’s js entry file app.js, create a new project module and add the ng-animate module that depends on it.

var demoApp = angular.module('demoApp', ['ngAnimate','ui.router']);
Copy the code

Angular dependency injection is not a problem when packaged with ADS, BDS, or other front-end automation tools, because it is only injected by passing parameters to function. Angular imposes strict rules on injected variable names (such as $scope when injected into a controller) :

// The dependency injection recommendations for controller.js, instruction.js, and filter.js are all written in this way. In the app. Js demoApp. Config ([' $stateProvider ', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider){ // your code. }]);Copy the code

All right, back to business. Angular’s animation mechanism takes effect with the introduction of ngAnimate.

The following directives and supported animations are written in the Angular documentation

Directive Supported Animations
ngRepeat enter, leave and move
ngView enter and leave
ngInclude enter and leave
ngSwitch enter and leave
ngIf enter and leave
ngClass add and remove
ngShow & ngHide add and remove (the ng-hide class value)
form add and remove (dirty, pristine, valid, invalid & all other validations)
ngModel add and remove (dirty, pristine, valid, invalid & all other validations)

So, how do you use it? This article takes the ng-repeat instruction as an introduction, and some other instructions are used in almost the same way, and can be analogy.

Ng-repeat is mainly a display of a list. These elements are created and added to the DOM structure. Then, its animation process is as follows:

Create element ->.ng-enter- >.ng-enter-active -> Complete, default state default state ->.ng-leave- >.ng-leave-active -> Destroy elementCopy the code

Ng-enter (.ng-leave) and.ng-enter-active(.ng-leave-active), plus cSS3 animation to display animation, such as:



     



     
    

      
  • 
    

    • 

     
/* CSS fragment */ /*ng-repeat element */. Item {-webkit-transition: all linear 1s; -o-transition: all linear 1s; transition: all linear 1s; } /* Animation-top */.item.ng-enter{opacity:0; } /* Animating process */. Item-ng-enter-active {opacity:1; }Copy the code

This effect is applied to all elements at the same time. In practice, it may be necessary to have a gradual effect successively. In this case, you can set ng-enter-stagger to achieve this effect.

/ /.item.ng-enter-stagger {transition-delay:0.5s; transition-duration:0; }Copy the code

In the same way, angular Animate provides classes for animations that can be applied to page transitions. If writing CSS is not enough, of course, you can also use JS to control animation, the following code you can think of as a template

/* CLASS is the name of the CLASS that needs to be applied, handles are the operations that are supported, as shown in the following figure. Animation ('.className ',function(){return {'handles':function(element,className,donw){//... Your code here // return function(cancelled){// alert(1); }}}})Copy the code

Supported operations:

This article briefly explains how to use ngAnimate in Angular projects. You’ll need to do some of the work yourself.

Other: an Angular third-party animation.

(to the end. Attached is a simple demo)