ngAnimate插件是做什么的？

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;
}
    //htMLdiv 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;
   }
      //htmldiv 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插件是做什么的？的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！