用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);
不足之處望大家原諒