使用ng-animate为网页增加动画效果

AngularJS 中提供了ngAnimate模块，可以为网页提供动画效果。

典型的应用就是视图切换和元素添加与移除。

这里以ui-view 和 ng-repeat指令作为展示。

首先需要引入我们需要的js文件

<script src="../angular.js"></script><script src="../angular-ui-router.js"></script><script src="../angular-animate.js"></script>

再引入我们需要的模块：ui.router和ngAnimate。

angular.module("app", ['ui.router', 'ngAnimate'])

然后我们可以正常编写我们的应用，我们这里做的额外工作只是编写css文件。

只编写样式就可以了？实际上，$animate服务本身支持几个内置的指令，比如ng-repeat, ng-show, ng-view等。而它的本质只是为其在视图变化期间添加了额外的CSS样式。

对于添加元素事件会添加ng-enter和ng-enter-active样式类，对于移除元素会添加ng-leave和ng-leave-active样式。其中前者样式相当于初始化元素样式，后者则对应实际的动画样式。

举个例子：

li{    transition: all 5.3s ease-in-out;}li.ng-enter{    opacity: 0;    transform:translateY(100%);}li.ng-enter.ng-enter-active{    opacity: 1;    transform:translateY(0);}li.ng-leave{    opacity: 1;    transform:translateY(0);}li.ng-leave.ng-leave-active{    opacity: 0;    transform:translateY(100%);}

对应的效果就是：

ui-view也是一样，实际上它保留了2个ui-view元素，一个对应将展示的节点，一个对应将移除的节点。

[ui-view].ng-enter,[ui-view].ng-leave {    box-sizing: border-box;    position: absolute;    width: 100%;    transition: all .3s ease-in-out;}[ui-view].ng-enter {    opacity: 0;    transform: scale3d(.6, .6, .6);}[ui-view].ng-enter-active {    opacity: 1;    transform: scale3d(1, 1, 1);}[ui-view].ng-leave {    opacity: 1;    transform: scale3d(1, 1, 1);}[ui-view].ng-leave-active {    opacity: 0;    transform: scale3d(.6, .6, .6);}

效果就是这样的

审查元素会发现以上4种样式。

以上。
掌握这些技巧我们就可以为应用添加简单实用的网页动画效果。