What does the ngAnimate plug-in do?

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

fa8085f4b8306994268303fc69ca2c852cacc6d41bbb37262a98f745aa00fbf0ba4d4b9f6f2c289440c21e48447709992cacc6d41bbb37262a98f745aa00fbf0

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

<br>

var appH5=angular.module("app",['ngAnimate']);
appH5.controller("myTabCtrl",['$scope',function($scope){
         $scope.isShow=true;
}])7effc392ac7920ed9410c2be10cad254e098f3d94619007683426b67269cbcdbb7a3a36c4230f5cd5e1e2febb8eb2b7a我是要动画的元素16b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e4956添加动画的第一种方式：通过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;
}
//htmlf5008afb7113285acabf919e53d98271我是要动画的元素16b28748ea4df4d9c2150843fecfba68

<br>

<br>

• 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; 
  }
  //htmlad890059b08d8ac81ac81ef61142f84a{{new.title}}16b28748ea4df4d9c2150843fecfba68

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?

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

 <br/>

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)
        }
    }
});

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!