ngAnimate插件有什么用

這篇文章主要介紹ngAnimate插件有什么用，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了玉溪免費(fèi)建站歡迎大家使用！

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;
}
/*元素進(jìn)入頁面初始狀態(tài)*/
.new-item.ng-enter{
  top: 10px;
}
/*進(jìn)入頁面動畫后的最終狀態(tài)*/
.new-item.ng-enter-active{
  top: 0px;
}
/*元素移出頁面初始狀態(tài)*/
.new-item.ng-leave{
  opacity:1;
}
/*移出頁面動畫后的最終狀態(tài)*/
.new-item.ng-leave-active{
  opacity:0;
}
//html<div class="new-item">我是要動畫的元素</div>

為什么添加樣式就可以產(chǎn)生動畫？
當(dāng)元素進(jìn)入頁面時，angular會給元素依次添加上class ng-enter 和 ng-enter-active，相信大家都知道，CSS3.0在一個元素定義了 transition 之后，兩個相同屬性的屬性值改變就會用過渡動畫來實(shí)現(xiàn)屬性值的改變。當(dāng)元素移除頁面時也是同理，所以我們只要定義元素的四個class來定義這四個時間點(diǎn)的狀態(tài)，其他的就交給angular來做就好了。
支持這種方式定義動畫的指令有哪些？
ng-if、ng-view、ng-repeat、ng-include、ng-switch
這幾個指令是通過新建節(jié)點(diǎn)和移除節(jié)點(diǎn)來實(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提供了這個樣式，來實(shí)現(xiàn)每一個item條目的依次執(zhí)行某個動畫 */
  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>

剛才說通過新建和刪除元素來實(shí)現(xiàn)的指令是可以進(jìn)行動畫的，那么只是更改樣式顯示或者隱藏元素的指令（ng-show ng-hide ng-class ）能不能進(jìn)行動畫呢？

/*元素隱藏初始狀態(tài)*/
.new-item.ng-hide-add{
    opacity:1;
}
/*隱藏操作動畫后的最終狀態(tài)*/
.new-item.ng-hide-add-active{
    opacity:0;
}
/*元素顯示初始狀態(tài)*/
.new-item.ng-hide-remove{
    top: 10px;
}
/*顯示操作動畫后的最終狀態(tài)*/
.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){
            //第一個參數(shù)是運(yùn)動的元素，第二個參數(shù)是動畫完成后的回調(diào)，必須調(diào)用的，不調(diào)用則指令功能不會執(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){
            //第一個參數(shù)是運(yùn)動的元素
            //第二個參數(shù)是元素的樣式-->一般用不上
            //第三個參數(shù)是動畫完成后的回調(diào)，必須調(diào)用的，不調(diào)用則指令功能不會執(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)
        }
    }
});

以上是“ngAnimate插件有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：ngAnimate插件有什么用
分享URL：http://muchs.cn/article20/gdicjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、電子商務(wù)、服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、標(biāo)簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

ngAnimate插件有什么用

ngAnimate插件是做什么的？

怎么定義動畫？

ngAnimate插件是做什么的？

怎么定義動畫？