What does the ngAnimate plug-in do?-H5 Tutorial-php.cn

What does the ngAnimate plug-in do?

零下一度

Release： 2017-06-30 15:27:42

Original

1563 people have browsed it

What does the ngAnimate plug-in do?

ngAnimate plug-in, as its name suggests, provides animation for elements.

How to define animation?

The first step must be to introduce the plug-in

<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>

Copy after login

The second step is to introduce the app (dependency) This plug-in

<br>

Copy after login

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>

Copy after login

<br>

Copy after login

<br>

Copy after login

Why can animation be generated by adding styles? <br>When an element enters the page, angular will add classes ng-enter and ng-enter-active to the element in sequence. I believe everyone knows that after CSS3.0 defines a transition on an element, the attribute values of the two same attributes Changes will use transition animation to change the attribute value. The same is true when the element is removed from the page, so we only need to define four classes of the element to define the status of these four points in time, and let Angular do the rest.
What are the instructions that support defining animations in this way? <br>ng-if, ng-view, ng-repeat, ng-include, ng-switch<br>These instructions are used to display and hide elements by creating new nodes and removing nodes

The difference between 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>

Copy after login

Just said that by creating and deleting elements The implemented instructions can be animated, but can the instructions that only change the style to display or hide elements (ng-show ng-hide ng-class) be animated?

Copy after login

/*元素隐藏初始状态*/
.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;
}

Copy after login

 <br/>

Copy after login

The second way to add animation: through 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)
        }
    }
});

Copy after login

The above is the detailed content of What does the ngAnimate plug-in do?. For more information, please follow other related articles on the PHP Chinese website!