ngAnimate插件是做什么的？
nganimate插件如其名字一样是为元素提供动画的。
怎么定义动画？
第一步必须是引入插件
登录后复制
第二步让app引入（依赖）这个插件
登录后复制登录后复制登录后复制
var appH5=angular.module("app",['ngAnimate']);appH5.controller("myTabCtrl",['$scope',function($scope){ $scope.isShow=true;}])我是要动画的元素添加动画的第一种方式：通过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我是要动画的元素
登录后复制
登录后复制登录后复制登录后复制
登录后复制登录后复制登录后复制
为什么添加样式就可以产生动画？
当元素进入页面时，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{{new.title}}
登录后复制
刚才说通过新建和删除元素来实现的指令是可以进行动画的，那么只是更改样式显示或者隐藏元素的指令（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插件是做什么的？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2910493.html
