angular中的动画效果

用angular来形成动画效果的代码如下

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script src="angular.min.js"></script>
    <script src="angular-animate.js"></script>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        //把angular中模块名和要引入的依赖模块写入
        var app = angular.module('app',['ngAnimate']);
        //angular中的控制台。先让div显示以便更好观察效果
        app.controller('ctrl',function($scope){
           $scope.btn = true;
        });
        //要形成动画效果的元素
        app.animation('.box',function(){
            //返回效果元素
            return {
                enter:function(element,done){
                    //出现时的初始值
                    $(element).css({'width': 0, 'height': 0});
                    //结束时的最终样式
                    $(element).stop().animate({'width': 100, 'height': 100}, 1000);
                },
                leave:function(element,done){
                    //消失时最终的效果
                    $(element).stop().animate({'width': 0, 'height': 0}, 1000, done);
                }
            }
        });

    </script>
</head>
<body ng-controller="ctrl">
<input type="checkbox"  ng-model="btn">

<div class="box" ng-if="btn"></div>
</body>
</html>

这样我们就可以通过angular来形成动画效果了，并且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 (如果元素将显示)

下面我们看一个实例：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            transition: all 1s ease;
        }

        .box.ng-leave {
            opacity: 1;
        }

        .box.ng-leave-active {
            opacity: 0;
        }

        .box.ng-enter {
            opacity: 0;
        }
        .box.ng-enter-active{
            opacity: 1;
        }
    </style>
    <script src="angular.min.js"></script>
    <script src="angular-animate.js"></script>
    <script>
        var app = angular.module('app',['ngAnimate']);
        app.controller('ctrl',function($scope){
           $scope.btn = true;
        });

    </script>
</head>
<body ng-controller="ctrl">
<input type="checkbox"  ng-model="btn">

<div class="box" ng-if="btn"></div>
</body>
</html>

这个实例主要标明：当你复选框选中时，让div背景透明度等于0慢慢变成1显示；

　　　　　　　 　当你没选中复选框时，让div背景透明度等于1慢慢变成0隐藏；

但是这两个在我们快速点击的时候会形成一个bug，那就是因为上一个没有执行完而形成好几个正在过度的过程。
如果要解决这个bug的方法其实也挺简单，那就是在执行前先暂停一下。下面是代码；

 $(element).stop().animate({'width': 0, 'height': 0}, 1000, done);
不足之处望大家原谅