ngAnimate插件是做什么的？

互联网 17-6-30

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>

支持这种方式定义动画的指令有哪些？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插件是做什么的？的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：动画