overview

angular-animate.js插件可以对ng-repeat,ng-view,ui-view,ng-include,ng-switch,ng-if,ng-class,ng-show,ng-hide,form,ng-model等指令提供CSS3或者JS动画效果，这些指令分别两个梯队：

梯队一：DOM节点会被remove的梯队： if,view,repeat,include,switch

梯队二：DOM节点不会被remove，只是内容/样式会被改变的梯队： class, show, hide, model等

插件引入

1. HTML中引入angular-animate.js, 地址
2. 在angular中注入ngAnimate模块

ng-animate之CSS3动画

以ui-view为例：

1. 引入angular-animate插件和注入ngAnimate模块
2. 引入angular-ui-route.js，配置$stateProvider
3. 在css定义ng-enter，ng-leave的样式，可以用transition/animation
4. 预览页面即可看到动画效果

原理：ng在这个指令进行内容切换时，默认会给内容加上ng-enter,ng-enter-active或者ng-leave,ng-leave-active样式。如图：

利用这个原理，我们就可以分别定义[ui-view]元素有上述class的样式和无上述class的样式，从而达到一个动画效果了。

但并不是每一个元素都是用ng-enter,ng-leave的，规则如下：

梯队一用的是：ng-enter, ng-enter-active, ng-leave, ng-leave-active （repeat: ng-enter-stagger animation-delay）

梯队二用的是：ng-hide-add, ng-hide-add-active, ng-hide-remove, ng-hide-remove-active

ng-animate之JavaScript动画

JavaScript实现动画的好处是兼容性好，具体的用法是在animation方法里返回一个对象，对象包含 enter/leave 或者 addClass/removeClass 方法的定义：

对于梯队一的指令，使用的是enter/leave:

angular.module("appAnimations", ["ngAnimate"])// 注意使用的是css selector的animation-name
.animation(".anim", function(){return {//element：指令所在的DOM//done：指令封装好的方法，需要在动画结束时调用执行enter: function(element, done){$(element).animate({left: "100px"}, 1000, done)},leave: function(element, done){$(element).animate({left: "-100px"})}}
})

对于梯队二的指令，使用的是addClass/removeClass:

angular.module("appAnimations", ["ngAnimate"]).animation(".anim", function(){return {//element：指令所在的DOM//className: 被添加/被去掉的类名//done：指令封装好的方法，需要在动画结束时调用执行addClass: function(element, className, done){if("active" != className) return$(element).animate({left: "100px"}, 1000, done)},removeClass: function(element, className, done){if("active" != className) return$(element).animate({left: "-100px"})}}
})

具体操作步骤：

1. 引入angular-animate插件和注入ngAnimate模块
2. 根据指令，选择并定义好上述animation方法
3. 运行预览效果即可

参考资料：

• ngAnimate
• 慕课网
• ionic中文教程
• AngularJS学习 动画操作 (Applying Animations) ngAnimate step 12