ngAnimate插件有什么用

这篇文章主要介绍ngAnimate插件有什么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了玉溪免费建站欢迎大家使用!

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我是要动画的元素

刚才说通过新建和删除元素来实现的指令是可以进行动画的,那么只是更改样式显示或者隐藏元素的指令(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插件有什么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站标题:ngAnimate插件有什么用
文章转载:http://myzitong.com/article/gdicjo.html

其他资讯