站長(zhǎng)資訊網(wǎng)ngAnimate插件是做什么的？
ngAnimate插件如其名字一樣是為元素提供動(dòng)畫(huà)的。
怎么定義動(dòng)畫(huà)？
第一步必須是引入插件
<script src="//cdn.bootcss.com/angular.js/1.3.20/angular.js?1.1.11"></script><script src="//cdn.bootcss.com/angular.js/1.3.20/angular-animate.min.js?1.1.11"></script>
第二步讓app引入（依賴）這個(gè)插件
var appH5=angular.module("app",['ngAnimate']); appH5.controller("myTabCtrl",['$scope',function($scope){ $scope.isShow=true; }])<body ng-controller="myTabCtrl"><input type="checkbox" ng-model="isShow" /><div class="new-item" ng-if="isShow">我是要?jiǎng)赢?huà)的元素</div></body>添加動(dòng)畫(huà)的第一種方式：通過(guò)css3.0的方式 樣式定義示例 .new-item{ padding: 10px; border-bottom: 1px solid #ededed; font-size: 1.5rem; position: relative; transition:all 0.5s; } /*元素進(jìn)入頁(yè)面初始狀態(tài)*/ .new-item.ng-enter{ top: 10px; } /*進(jìn)入頁(yè)面動(dòng)畫(huà)后的最終狀態(tài)*/ .new-item.ng-enter-active{ top: 0px; } /*元素移出頁(yè)面初始狀態(tài)*/ .new-item.ng-leave{ opacity:1; } /*移出頁(yè)面動(dòng)畫(huà)后的最終狀態(tài)*/ .new-item.ng-leave-active{ opacity:0; } //html<div class="new-item">我是要?jiǎng)赢?huà)的元素</div>
-
為什么添加樣式就可以產(chǎn)生動(dòng)畫(huà)？
當(dāng)元素進(jìn)入頁(yè)面時(shí)，angular會(huì)給元素依次添加上class ng-enter 和 ng-enter-active，相信大家都知道，CSS3.0在一個(gè)元素定義了 transition 之后，兩個(gè)相同屬性的屬性值改變就會(huì)用過(guò)渡動(dòng)畫(huà)來(lái)實(shí)現(xiàn)屬性值的改變。當(dāng)元素移除頁(yè)面時(shí)也是同理，所以我們只要定義元素的四個(gè)class來(lái)定義這四個(gè)時(shí)間點(diǎn)的狀態(tài)，其他的就交給angular來(lái)做就好了。 -
支持這種方式定義動(dòng)畫(huà)的指令有哪些？
ng-if、ng-view、ng-repeat、ng-include、ng-switch
這幾個(gè)指令是通過(guò)新建節(jié)點(diǎn)和移除節(jié)點(diǎn)來(lái)實(shí)現(xiàn)元素的顯示和隱藏的 -
ng-repeat 的不同之處
.new-item{ padding: 10px; border-bottom: 1px solid #ededed; font-size: 1.5rem; position: relative; transition:all 0.5s; } .new-item.ng-enter{ top: 10px; } .new-item.ng-enter-active{ top: 0px; } .new-item.ng-enter-stagger{/*ng-repeat提供了這個(gè)樣式，來(lái)實(shí)現(xiàn)每一個(gè)item條目的依次執(zhí)行某個(gè)動(dòng)畫(huà) */ animation-delay:100ms; -webkit-animation-delay:100ms; } .new-item.ng-leave{ opacity:1; } .new-item.ng-leave-active{ opacity:1; } .new-item.ng-leave-stagger{ animation-delay:100ms; -webkit-animation-delay:100ms; } //html<div class="new-item" ng-repeat="new in news">{{new.title}}</div>
剛才說(shuō)通過(guò)新建和刪除元素來(lái)實(shí)現(xiàn)的指令是可以進(jìn)行動(dòng)畫(huà)的，那么只是更改樣式顯示或者隱藏元素的指令（ng-show ng-hide ng-class ）能不能進(jìn)行動(dòng)畫(huà)呢？
/*元素隱藏初始狀態(tài)*/ .new-item.ng-hide-add{ opacity:1; } /*隱藏操作動(dòng)畫(huà)后的最終狀態(tài)*/ .new-item.ng-hide-add-active{ opacity:0; } /*元素顯示初始狀態(tài)*/ .new-item.ng-hide-remove{ top: 10px; } /*顯示操作動(dòng)畫(huà)后的最終狀態(tài)*/ .new-item.ng-hide-remove-active{ top: 0px; }
添加動(dòng)畫(huà)的第二種方式：通過(guò)js的方式
//ng-if、ng-view、ng-repeat、ng-include、ng-switch 指令 appH5.animation(".new-item",function(){ return { leave:function(element,done){ //第一個(gè)參數(shù)是運(yùn)動(dòng)的元素，第二個(gè)參數(shù)是動(dòng)畫(huà)完成后的回調(diào)，必須調(diào)用的，不調(diào)用則指令功能不會(huì)執(zhí)行 $(element).animate({width:0,height:0},1000,done);//借助jQuery }, enter:function(element,done){ $(element).css({width:100,height:100});//借助jQuery $(element).animate({width:100,height:100},1000,done)//借助jQuery } } }); //ng-show ng-hide ng-class 指令 appH5.animation(".new-item",function(){ return { addClass:function(element,sClass,done){ //第一個(gè)參數(shù)是運(yùn)動(dòng)的元素 //第二個(gè)參數(shù)是元素的樣式-->一般用不上 //第三個(gè)參數(shù)是動(dòng)畫(huà)完成后的回調(diào)，必須調(diào)用的，不調(diào)用則指令功能不會(huì)執(zhí)行 $(element).animate({width:0,height:0},1000,done) }, removeClass:function(element,sClass,done){ $(element).css({width:100,height:100}); $(element).animate({width:100,height:100},1000,done) } } });
