ngAnimate插件如其名字一樣是為元素提供動畫的。
第一步必須是引入外掛程式
fa8085f4b8306994268303fc69ca2c852cacc6d41bbb37262a98f745aa00fbf0ba4d4b9f6f2c289440c21e48447709992cacc6d41bbb37262a98f745aa00fbf0
#
第二步驟讓app引入(依賴)這個外掛
<br>
var appH5=angular.module("app",['ngAnimate']); appH5.controller("myTabCtrl",['$scope',function($scope){ $scope.isShow=true; }])7effc392ac7920ed9410c2be10cad254e098f3d94619007683426b67269cbcdbb7a3a36c4230f5cd5e1e2febb8eb2b7a我是要动画的元素16b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e4956添加动画的第一种方式:通过css3.0的方式 样式定义示例 .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-leave{ opacity:1; } /*移出页面动画后的最终状态*/ .new-item.ng-leave-active{ opacity:0; } //htmlf5008afb7113285acabf919e53d98271我是要动画的元素16b28748ea4df4d9c2150843fecfba68
<br>
<br>
為什麼要新增樣式就可以產生動畫? <br>當元素進入頁面時,angular會為元素依序加上上class ng-enter 和 ng-enter-active,相信大家都知道,CSS3.0在一個元素定義了transition 之後,兩個相同屬性的屬性值改變就會用過渡動畫來實現屬性值的改變。當元素移除頁面時也是同理,所以我們只要定義元素的四個class來定義這四個時間點的狀態,其他的就交給angular來做就好了。
支援這種方式定義動畫的指令有哪些? <br>ng-if、ng-view、ng-repeat、ng-include、ng-switch<br>這幾個指令是透過新節點和移除節點來實現元素的顯示和隱藏的
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提供了这个样式,来实现每一个item条目的依次执行某个动画 */ 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; } //htmlad890059b08d8ac81ac81ef61142f84a{{new.title}}16b28748ea4df4d9c2150843fecfba68
剛才說透過新建和刪除元素來實現的指令是可以進行動畫的,那麼只是更改樣式顯示或隱藏元素的指令(ng-show ng-hide ng-class )能不能進行動畫呢?
/*元素隐藏初始状态*/ .new-item.ng-hide-add{ opacity:1; } /*隐藏操作动画后的最终状态*/ .new-item.ng-hide-add-active{ opacity:0; } /*元素显示初始状态*/ .new-item.ng-hide-remove{ top: 10px; } /*显示操作动画后的最终状态*/ .new-item.ng-hide-remove-active{ top: 0px; }
<br/>
新增動畫的第二種方式:透過js的方式
//ng-if、ng-view、ng-repeat、ng-include、ng-switch 指令 appH5.animation(".new-item",function(){ return { leave:function(element,done){ //第一个参数是运动的元素,第二个参数是动画完成后的回调,必须调用的,不调用则指令功能不会执行 $(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){ //第一个参数是运动的元素 //第二个参数是元素的样式-->一般用不上 //第三个参数是动画完成后的回调,必须调用的,不调用则指令功能不会执行 $(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) } } });
以上是ngAnimate插件是做什麼的?的詳細內容。更多資訊請關注PHP中文網其他相關文章!