廢話不多說了，直接給大家貼實例代碼。
直接看例子：
<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ngAnimate插件1</title> <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script><script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script> <style type="text/css"> .box{width:200px;height:200px;background-color:red;transition:1s all;}/*顯示操作*/.box.ng-enter{opacity:0;}.box.ng-enter-active{opacity:1;}/*隱藏操作*/.box.ng-leave{opacity:1;}.box.ng-leave-active{opacity:0;}</style></head><body><div ng-controller="Aaa"><input type="checkbox" ng-model="bBtn"><div class="box" ng-if="bBtn"></div></div><script type="text/javascript">var m1 = angular.module('myApp',['ngAnimate']);m1.controller('Aaa',['$scope',function($scope){$scope.bBtn = true;}]);</script></body></html>引入angular-animate插件，我們綁定了ng-if指令，在刪除和添加DOM節點的時候，angular會添加指定的class，方便我們完成動畫。
.ng-enter
.ng-enter-active
.ng-leave
.ng-leave-active
現在再看看顯示和隱藏。
<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ngAnimate插件4</title><script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script><script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script><style type="text/css">.box{width:200px;height:200px;background-color:red;transition:1s all;}/*顯示操作*/.box.ng-hide-remove{opacity:0;}.box.ng-hide-remove-active{opacity:1;}/*隱藏操作*/.box.ng-hide-add{opacity:1;}.box.ng-hide-add-active{opacity:0;}</style></head><body><div ng-controller="Aaa"><input type="checkbox" ng-model="bBtn"><div class="box" ng-show="bBtn"></div></div><script type="text/javascript">var m1 = angular.module('myApp',['ngAnimate']);m1.controller('Aaa',['$scope',function($scope){$scope.bBtn = true;}]);</script></body></html> .ng-hide-remove
.ng-hide-remove-active
.ng-hide-add
.ng-hide-add-active
這個例子我們使用的是ng-show，屬于顯示和隱藏。上一個例子是ng-if，屬于添加和刪除。
回顧上一節我們提到的路由，我們可以結合起來操作。
<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ngAnimate插件2</title> <script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-route.min.js"></script><script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-animate.min.js"></script> <style type="text/css">.box{transition:1s all;position:absolute;}/*顯示操作*/.box.ng-enter{opacity:0;}.box.ng-enter-active{opacity:1;}/*隱藏操作*/.box.ng-leave{opacity:1;}.box.ng-leave-active{opacity:0;}</style></head><body><div ng-controller="Aaa"><a href="javascript:void(0);" ng-click="$location.path('aaa')">首頁</a><a href="javascript:void(0);" ng-click="$location.path('bbb')">內容</a><a href="javascript:void(0);" ng-click="$location.path('ccc')">標題</a><div class="box" ng-view></div></div><script type="text/javascript">var m1 = angular.module('myApp',['ngRoute','ngAnimate']);m1.config(['$routeProvider',function($routeProvider){$routeProvider.when('/aaa',{template : '<h1>AAA</h1>{{name}}',controller : 'Aaa'}).when('/bbb',{template : '<h1>BBB</h1>{{name}}',controller : 'Bbb'}).when('/ccc',{template : '<h1>CCC</h1>{{name}}',controller : 'Ccc'}).otherwise({redirectTo : '/aaa'});}]);m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){$scope.name = 'xiecg-Aaa';$scope.$location = $location;}]);m1.controller('Bbb',['$scope',function($scope){$scope.name = 'xiecg-Bbb';}]);m1.controller('Ccc',['$scope',function($scope){$scope.name = 'xiecg-Ccc';}]);</script></body></html> 這樣在切換頁面的時候就有淡入淡出的效果。
再回顧前面的幾章講的百度搜索：
<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ngAnimate插件3</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script><script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script> <style type="text/css">.box{transition:1s all;}/*顯示操作*/.box.ng-enter{opacity:0;}.box.ng-enter-active{opacity:1;}/*隱藏操作*/.box.ng-leave{display:none;}.box.ng-enter-stagger{animation-delay:0.1s;}</style></head><body><div ng-controller="Aaa"><input type="text" ng-model="name" ng-keyup="change(name)"><input type="button" ng-click="change(name)" value="搜索"><ul><li class="box" ng-repeat="d in data">{iwvjtn8m0}</li></ul></div><script type="text/javascript">var m1 = angular.module('myApp',['ngAnimate']);m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){var timer = null;$scope.data = [];$scope.change = function(name){$timeout.cancel(timer);timer = $timeout(function(){$http({method : 'JSONP',url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK',}).success(function(data,state,headers,config){console.log(data);$scope.data = data.s;}).error(function(data){console.log(data);});},500);};}]);</script></body></html> 通過跨域我們得到百度返回過來的數據，依次過渡顯示到頁面上。
下面來看JS動畫的例子：
<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ngAnimate插件5</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script><script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script><style type="text/css">.box{width:200px;height:200px;background-color:red;}</style></head><body><div ng-controller="Aaa"><input type="checkbox" ng-model="bBtn"><div class="box" ng-if="bBtn"></div></div><script type="text/javascript">var m1 = angular.module('myApp',['ngAnimate']);//ng-ifm1.animation('.box',function(){return {//hide（刪除）leave : function(element,done){//console.log(element,done); //元素節點&刪除節點的回調函數$(element).animate({width : 0,height : 0},1000,done);},//show（填充）enter : function(element,done){//ng-if會動態創建元素，元素默認就有200的高寬。。。$(element).css({width : 0,height : 0}).animate({width : 200,height : 200},1000,done);}};});m1.controller('Aaa',['$scope',function($scope){$scope.bBtn = true;}]);</script></body></html> JS動畫我們使用JQ的動畫庫來完成，注意我們在視圖上使用的是ng-if，表示添加和刪除DOM節點，所以我們在控制器return leave&enter。
JS動畫有了ng-if，自然就是ng-show。
<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ngAnimate插件5</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script><script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-animate.min.js"></script><style type="text/css">.box{width:200px;height:200px;background-color:red;}</style></head><body><div ng-controller="Aaa"><input type="checkbox" ng-model="bBtn"><div class="box" ng-show="bBtn"></div></div><script type="text/javascript">var m1 = angular.module('myApp',['ngAnimate']);//ng-showm1.animation('.box',function(){return {//hide（隱藏）addClass : function(element,sClass,done){//console.log(element,sClass,done); //元素節點&樣式名&刪除節點的回調函數$(element).animate({width : 0,height : 0},1000,done);},//show（顯示）removeClass : function(element,sClass,done){$(element).animate({width : 200,height : 200},1000,done); }};});m1.controller('Aaa',['$scope',function($scope){$scope.bBtn = true;}]);</script></body></html>在控制器return addClass&removeClass，表示隱藏和顯示。
新聞熱點
疑難解答
