溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹ngAnimate插件有什么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
ngAnimate插件如其名字一樣是為元素提供動畫的。
第一步必須是引入插件
<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引入（依賴）這個插件
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">我是要動畫的元素</div></body>添加動畫的第一種方式：通過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;
}
//html<div class="new-item">我是要動畫的元素</div>為什么添加樣式就可以產生動畫？
當元素進入頁面時，angular會給元素依次添加上class ng-enter 和 ng-enter-active，相信大家都知道，CSS3.0在一個元素定義了 transition 之后，兩個相同屬性的屬性值改變就會用過渡動畫來實現屬性值的改變。當元素移除頁面時也是同理，所以我們只要定義元素的四個class來定義這四個時間點的狀態，其他的就交給angular來做就好了。
支持這種方式定義動畫的指令有哪些？
ng-if、ng-view、ng-repeat、ng-include、ng-switch
這幾個指令是通過新建節點和移除節點來實現元素的顯示和隱藏的
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;
}
//html<div class="new-item" ng-repeat="new in news">{{new.title}}</div>剛才說通過新建和刪除元素來實現的指令是可以進行動畫的，那么只是更改樣式顯示或者隱藏元素的指令（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;
}添加動畫的第二種方式：通過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插件有什么用”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
