使用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种样式。

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