Que fait le plug-in ngAnimate ?-Tutoriel H5-php.cn

Que fait le plug-in ngAnimate ?

零下一度

Libérer： 2017-06-30 15:27:42

original

1507 Les gens l'ont consulté

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

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

Copier après la connexion

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

<br>

Copier après la connexion

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>

Copier après la connexion

<br>

Copier après la connexion

<br>

Copier après la connexion

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; 
}
//html<div class="new-item" ng-repeat="new in news">{{new.title}}</div>

Copier après la connexion

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 ?

Copier après la connexion

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

Copier après la connexion

 <br/>

Copier après la connexion

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

Copier après la connexion

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!