Que fait le plug-in ngAnimate ?

Que fait le plug-in ngAnimate ?

Le plug-in ngAnimate, comme son nom l'indique, fournit une animation pour les éléments.

Comment définir l'animation ?

La première étape doit être d'introduire le plug-in

fa8085f4b8306994268303fc69ca2c852cacc6d41bbb37262a98f745aa00fbf0ba4d4b9f6f2c289440c21e48447709992cacc6d41bbb37262a98f745aa00fbf0

La deuxième étape est de présenter l'application (dépend de) ce plugin

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

• Pourquoi une animation peut-elle être produite en ajoutant des styles ? <br>Lorsqu'un élément entre dans la page, Angular ajoutera les classes ng-enter et ng-enter-active à l'élément dans l'ordre. Je crois que tout le monde sait qu'après que CSS3.0 ait défini une transition sur un élément, les valeurs d'attribut. ​​des deux mêmes attributs Les modifications utiliseront l'animation de transition pour modifier la valeur de l'attribut. La même chose est vraie lorsque l'élément est supprimé de la page, nous n'avons donc besoin que de définir quatre classes de l'élément pour définir l'état de ces quatre moments, et laisser Angular faire le reste.

• Quelles sont les commandes qui permettent de définir des animations de cette manière ? <br>ng-if, ng-view, ng-repeat, ng-include, ng-switch<br>Ces instructions sont utilisées pour afficher et masquer des éléments en créant de nouveaux nœuds et en supprimant des nœuds

• La différence entre 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

Je viens de le mentionner via nouveau et supprimé Les instructions implémentées par les éléments peut être animé, mais les instructions qui modifient uniquement le style pour afficher ou masquer des éléments (ng-show ng-hide ng-class) peuvent-elles être animées ?

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

La deuxième façon d'ajouter une animation : via js Way

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!