这篇文章主要介绍ngAnimate插件有什么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ngAnimate插件是做什么的？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;
}
//html<div 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{
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插件有什么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网JavaScript频道！
--结束END--
本文标题: ngAnimate插件有什么用
本文链接: https://lsjlt.com/news/80863.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0