ngAnimate插件是做什麼的？-H5教程-PHP中文網

ngAnimate插件是做什麼的？

零下一度

發布： 2017-06-30 15:27:42

原創

1508 人瀏覽過

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引入（依賴）這個外掛

<br>

登入後複製

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>

登入後複製

<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; 
}
//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;
}

登入後複製

 <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中文網其他相關文章！