本文共 1948 字，大约阅读时间需要 6 分钟。

一、AngularJS动画

1.AngularJS提供了动画效果，可以配合Css使用。

2.AngularJS使用动画需要引入 angular-animate.ming.js库

3.需要在模块创建时引入'ngAnimate'模块

var app = angular.module('myApp', ['ngAnimate']);

4.AngularJS在加载成功后也会向当前页面添加一段基本的css样式

5.可以使用一些定好的一些动画库：

二、ngAnimate工作原理

ngAnimate 模型可以添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:

• ng-show
• ng-hide
• ng-class
• ng-view
• ng-include
• ng-repeat
• ng-if
• ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。

此外， 在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加一下类：

• ng-animate
• ng-hide-animate
• ng-hide-add (如果元素将被隐藏)
• ng-hide-remove (如果元素将显示)
• ng-hide-add-active (如果元素将隐藏)
• ng-hide-remove-active (如果元素将显示)

三、实例1，给ng-hide添加自定义动画

1.引用：

2.自定义样式：

/*自定义处理样式*/.panel {    transition: all linear 0.5s;    position: relative;    left: 0;    top: 0;    width: 200px;    height: 100px;    margin-top: 200px;}.ng-hide {    height: 0;    width: 0;    top: -200px;    left: 200px;}.text-overflow {    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;}

3.HTMl：

   
    
               隐藏panel        
    
        
     
            
      
       主面板
      
        
     
        
     
        
     
    
    
   

显示：

四、基于Css的动画效果,实例2之ng-if指令，ng-enter,ng-enter-active,ng-animate

1.定义ng-if使用的样式

/*自定义处理样式*/.fade {opacity: 1;}.fade.ng-enter {    /* 当使用css transition实现动画效果时，在开始时的样式中必须包含transition的设置 */    transition: 5s linear all;    opacity: 0;}    /*结束时的样式*/    .fade.ng-enter.ng-enter-active {        opacity: 1;    }

2.html绑定：

   
    
    
        
     按钮样式1        
     按钮样式2    
    
    
    Fade In!    
    Fade Out!
   

3.过程说明：

Step 1（点击前，如前面所说，ngIf在触发前，DOM中并没有div）：

Step 2（点击按钮后，AngularJS自动添加了ng-animate、ng-enter、ng-enter-active这三个动画相关的样式名，并由ngAnimate模块执行动画效果）：

Step 3（动画执行完后，示例中是5s后，ng-animate、ng-enter、ng-enter-active被移除，div的状态为ng-enter-active中指定的状态）：