angular-动画。

ngAnimate插件是做什么的？

ngAnimate插件如其名字一样是为元素提供动画的。

怎么定义动画？

第一步必须是引入插件

<script src="//cdn.bootcss.com/angular.js/1.3.20/angular.js"></script>

<script src="//cdn.bootcss.com/angular.js/1.3.20/angular-animate.min.js"></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{/*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)

        }

    }

});

巴特西

angular-动画。

ngAnimate插件是做什么的？

怎么定义动画？

最新文章

热门文章