AngularJSプラグイン:アニメーションプラグインngAnimate



Angularjs Plugin Animation Plugin Nganimate



ngAnimateプラグインは何をしますか?

ngAnimateプラグインは、その名前と同様に、要素に対してアニメーション化されます。

アニメーションを定義する方法は?

最初のステップはプラグインを導入することでなければなりません



var appH5=angular.module('app',['ngAnimate']) appH5.controller('myTabCtrl',['$scope',function($scope){ $scope.isShow=true }]) I am the element to animate

2番目のステップは、アプリにこのプラグインを導入させることです(依存します)。

.new-item{ padding: 10px border-bottom: 1px solid #ededed font-size: 1.5rem position: relative transition:all 0.5s } /* element enters the initial state of the page*/ .new-item.ng-enter{ top: 10px } /*Enter the final state after page animation*/ .new-item.ng-enter-active{ top: 0px } /* element moves out of page initial state*/ .new-item.ng-leave{ opacity:1 } /* Remove the final state after the page animation */ .new-item.ng-leave-active{ opacity:0 } //html I am the element to animate

アニメーションを追加する最初の方法: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-enter-stagger{/*ng-repeat provides this style to implement an animation of each item item in turn */ 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 {{new.title}}
  • なぜアニメーションを追加してアニメーションを作成するのですか?
    要素がページに入ると、angularは要素をページに順番に追加します。 クラス の-入力of-enter-active CSS 3.0が遷移を定義した後、2つの同一のプロパティのプロパティ値が遷移アニメーションで変更され、プロパティ値の変更が実現されることは誰もが知っていると思います。要素がページを削除する場合も同じことが言えます。したがって、要素の4つのクラスを定義するだけで、4つの時点の状態を定義でき、もう1つは角度に任されます。
  • アニメーションを定義するこの方法をサポートする手順は何ですか?
    ng-if、ng-view、ng-repeat ng-include、ng-switch
    これらの命令は、新しいノードを作成し、ノードを削除することにより、要素の表示と非表示を実装します。
  • リピートの違い
.new-item{ padding: 10px border-bottom: 1px solid #ededed font-size: 1.5rem position: relative transition:all 2s } /* element hides initial state*/ .new-item.ng-hide-add{ opacity:1 } /* Hide the final state after the operation animation */ .new-item.ng-hide-add-active{ opacity:0 } /* element shows initial state*/ .new-item.ng-hide-remove{ top: 10px } /* shows the final state after the operation animation */ .new-item.ng-hide-remove-active{ top: 0px }

要素の作成と削除によって実装された命令はアニメーション化できると言ったので、スタイルの表示を変更したり、要素の命令を非表示にしたりできますか(ng-show ng-hide ng-class)?

//ng-if, ng-view, ng-repeat, ng-include, ng-switch instructions appH5.animation('.new-item',function(){ return { leave:function(element,done){ / / The first parameter is the element of the motion, the second parameter is the callback after the animation is completed, must be called, the function will not be executed without calling $(element).animate({width:0,height:0},1000,done)//with jQuery }, enter:function(element,done){ $(element).css({width:100,height:100})//With jQuery $(element).animate({width:100,height:100},1000,done)//with jQuery } } }) //ng-show ng-hide ng-class directive appH5.animation('.new-item',function(){ return { addClass:function(element,sClass,done){ / / The first parameter is the element of motion / / The second parameter is the style of the element --> generally not used //The third parameter is the callback after the animation is completed. It must be called. If it is not called, the command function will not be executed. $(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) } } })

アニメーションを追加する2番目の方法:js経由