AngularJS动画（一）

一、AngularJS动画

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

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

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

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

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

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

http://augus.github.io/ngAnimate/

https://github.com/Augus/ngAnimate

二、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.引用：

<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/Angular/angular.min.js"></script>
<script src="../Scripts/Angular/angular-animate.min.js"></script>

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：

<div class="container" ng-app="myApp">
    <label>
        <input type="checkbox" ng-model="myCheck" />   隐藏panel
    </label>
    <div class="panel panel-danger" ng-hide="myCheck">
        <div class="panel-heading">
            <div class="panel-title text-overflow">主面板</div>
        </div>
        <div class="panel-body">
        </div>
    </div>
</div>
<script>
    var app = angular.module('myApp', ['ngAnimate']);
</script>

显示：

四、基于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绑定：

<div class="container" ng-app="myApp">
    <div ng-if="bool" class="fade">
        <button class="btn btn-default">按钮样式1</button>
        <button class="btn btn-primary">按钮样式2</button>
    </div>
    <button ng-click="bool=true">Fade In!</button>
    <button ng-click="bool=false">Fade Out!</button>
</div>
<script>
    var app = angular.module('myApp', ['ngAnimate']);
</script>

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中指定的状态）：