用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-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。
此外， 在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加一下类：
ng-animateng-hide-animateng-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);
不足之处望大家原谅