Was macht das ngAnimate-Plug-in?-H5-Tutorial-php.cn

Inhaltsverzeichnis

Was macht das ngAnimate-Plug-in?

Wie definiere ich Animation?

Heim

Web-Frontend

H5-Tutorial

Was macht das ngAnimate-Plug-in?

Jun 30, 2017 pm 03:27 PM

动画

Was macht das ngAnimate-Plug-in?

Das ngAnimate-Plug-in bietet, wie der Name schon sagt, Animationen für Elemente.

Wie definiere ich Animation?

Der erste Schritt muss die Einführung des Plug-Ins sein

&lt;script src=&quot;//cdn.bootcss.com/angular.js/1.3.20/angular.js?1.1.11&quot;&gt;&lt;/script&gt;&lt;script src=&quot;//cdn.bootcss.com/angular.js/1.3.20/angular-animate.min.js?1.1.11&quot;&gt;&lt;/script&gt;

Nach dem Login kopieren

Der zweite Schritt ist die Einführung der App (hängt davon ab) dieses Plugins

<br>

Nach dem Login kopieren

var appH5=angular.module("app",['ngAnimate']);
appH5.controller("myTabCtrl",['$scope',function($scope){
         $scope.isShow=true;
}])&lt;body ng-controller=&quot;myTabCtrl&quot;&gt;&lt;input type=&quot;checkbox&quot;  ng-model=&quot;isShow&quot; /&gt;&lt;div class=&quot;new-item&quot; ng-if=&quot;isShow&quot;&gt;我是要动画的元素&lt;/div&gt;&lt;/body&gt;添加动画的第一种方式：通过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&lt;div class=&quot;new-item&quot;&gt;我是要动画的元素&lt;/div&gt;

Nach dem Login kopieren

<br>

Nach dem Login kopieren

<br>

Nach dem Login kopieren

Warum können Animationen durch Hinzufügen von Stilen erstellt werden? <br>Wenn ein Element die Seite betritt, fügt Angular der Reihe nach die Klassen ng-enter und ng-enter-active zum Element hinzu. Ich glaube, jeder weiß, dass nach CSS3.0 ein Übergang für ein Element definiert wird Bei der Änderung der beiden gleichen Attribute wird eine Übergangsanimation verwendet, um den Attributwert zu ändern. Das Gleiche gilt, wenn das Element von der Seite entfernt wird. Wir müssen also nur vier Klassen des Elements definieren, um den Status dieser vier Zeitpunkte zu definieren, und Angular den Rest erledigen lassen.
Welche Befehle unterstützen das Definieren von Animationen auf diese Weise? <br>ng-if, ng-view, ng-repeat, ng-include, ng-switch<br>Diese Anweisungen werden verwendet, um Elemente anzuzeigen und auszublenden, indem neue Knoten erstellt und Knoten entfernt werden

Der Unterschied zwischen 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&lt;div class=&quot;new-item&quot; ng-repeat=&quot;new in news&quot;&gt;{{new.title}}&lt;/div&gt;

Nach dem Login kopieren

Gerade erwähnt durch neue und gelöschte Die von Elementen implementierten Anweisungen kann animiert werden, aber können die Anweisungen, die nur den Stil ändern, um Elemente anzuzeigen oder auszublenden (ng-show ng-hide ng-class), animiert werden?

Nach dem Login kopieren

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

Nach dem Login kopieren

 <br/>

Nach dem Login kopieren

Die zweite Möglichkeit, Animationen hinzuzufügen: über js Way

//ng-if、ng-view、ng-repeat、ng-include、ng-switch 指令
appH5.animation(&quot;.new-item&quot;,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(&quot;.new-item&quot;,function(){
    return {
        addClass:function(element,sClass,done){
            //第一个参数是运动的元素
            //第二个参数是元素的样式--&gt;一般用不上
            //第三个参数是动画完成后的回调，必须调用的，不调用则指令功能不会执行
            $(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)
        }
    }
});

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWas macht das ngAnimate-Plug-in?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn