vue.jsの遷移システムを介して、DOMノードを挿入/削除するプロセスにトランジションアニメーション効果を簡単に追加できます。 Vueは、適切な時期にCSSクラス名を追加/削除して、CSS3の遷移/アニメーション効果をトリガーします。また、対応するJavaScriptフック関数を提供して、遷移プロセス中にカスタムDOM操作を実行することもできます。
v-transition = "my-transition"命令を例にとると、この命令を含むdomノードが挿入または削除された場合、vueは以下を行います。
My-Transition IDを使用して、登録されたJavaScriptフックオブジェクトがあるかどうかを確認します。このオブジェクトは、vue.transition（ID、hooks）によってグローバルに登録するか、トランジションオプションを介して現在のコンポーネント内で定義することができます。このオブジェクトが見つかった場合、対応するフックは遷移アニメーションの異なる段階で呼び出されます。
ターゲット要素にCSS遷移効果か、アニメーション効果が適用されているかを自動的に検出し、適切な時期にCSSクラス名を追加/削除します。
JavaScriptフック関数が提供されず、対応するCSS遷移/アニメーション効果が検出されない場合、DOMの挿入/除去は次のフレームですぐに実行されます。
すべてのvue.js遷移効果は、dom操作がvue.jsを介してトリガーされた場合にのみ有効になります。トリガーは、V-IFなどの組み込みの命令によって、またはVM。$ appendto（）などのVueインスタンスメソッドを介して実行できます。
CSS遷移効果
典型的なCSS遷移効果は、次のように定義されます。
<div v-if = "show" v-transition = "Expand"> hello </div>
また、3つのCSSクラスを定義する必要があります。Expand-Transition、.Expand-Enter、および.Expand-Leave：
.Expand-Transition {transition：すべて.3s容易さ。高さ：30px;パディング：10px;バックグラウンドカラー：#eee;オーバーフロー：hidden;}。expand-enter、.expand-leave {height：0;パディング：0 10px;不透明：0;}同時に、JavaScriptフックを提供することもできます。
vue.transition（ 'Expand'、{beforeenter：function（el）{el.textcontent = 'beforeenter'}、enter：function（el）{el.textcontent = 'enter'}、function（el）{el.textcontent = 'aftedenter'}、entercElled：ferniceleded：unterse（el） （el）{el.textcontent = 'beforeleave'}、reave：function（el）{el.textcontent = 'leave'}、alfteLeave：function（el.textcontent = 'afterleave'}、leavecelled：function（el）{// cancellation} {// cancellation}））結果
ここで使用されるCSSクラス名は、V-Transitionディレクティブの値によって決定されます。 v-Transition = "Fade"を例にとると、CSSクラス.Fade-Transitionが常に存在し、.Fade-Enterと.Fade-Leaveは適切なタイミングで自動的に追加または削除されます。 V-Transitionディレクティブが値を提供しない場合、使用されるCSSクラス名はデフォルトの.V-Transition、.V-Enter、および.V-Leaveになります。
show属性が変更されると、Vueは現在の値に基づいて<div>要素を挿入/削除し、次のように適切な時間に対応するCSSクラスを追加/削除します。
ショーが虚偽になると、Vueは次のようになります。
1. beforeleaveフックを呼び出します。
2。要素にCSSクラス.Vリーブを適用して、遷移効果をトリガーします。
3。休暇フックを呼び出します。
4。遷移効果が実行されるのを待ちます。 （TransitionEndイベントを聞く）
5. DOMから要素を削除し、CSSクラス.Vリーブを削除します。
6. AfterLeaveフックを呼び出します。
ショーが真実である場合、Vueは次のとおりです。
1。前のフックを呼び出します。
2。要素にCSS class.v-enterを適用します。
3.要素をDOMに挿入します。
4. Enterフックを呼び出します。
5. .v-enterクラスを適用し、CSSレイアウトを強制して、.v-enterが有効になることを確認します。最後に、.v-enterを削除して、要素をトリガーして元の状態に移行します。
6.遷移効果が実行されるのを待ちます。
7。後のフックを呼び出します。
さらに、移行が完了する前に着信遷移効果を実行している要素が削除された場合、EnterCancelledフックが実行されます。このフックは、Enterで作成されたタイマーの削除など、作業のクリーニングに使用できます。同じことが、移行中に再挿入されている要素にも当てはまります。
上記のすべてのフック関数が実行されると、これは対応するVUEインスタンスを指します。要素自体がVUEインスタンスのルートノードである場合、インスタンスはこれとして適用されます。それ以外の場合、これは移行命令が属するインスタンスを指します。
最後に、Enter and Leave Hook関数は、オプションの2番目のパラメーターであるコールバック関数を受け入れることができます。関数署名に2番目のパラメーターが含まれている場合、VUEに依存してCSSトランジションの遷移イベントを自動的に検出するのではなく、このコールバックを使用してトランジションプロセス全体を明示的に完了することを期待しています。例えば：
入力：function（el）{// 2番目のパラメーターなし//遷移効果の終了は、CSS遷移終了イベントによって決定されます}vs
入力：function（el、done）{// 2番目のパラメーターがあります//遷移効果の最後は、「done」を手動で呼び出すことによって決定する必要があります}複数の要素が同時に遷移効果を実行すると、Vue.jsはプロセスをバッチして、強制レイアウトが一度だけトリガーされるようにします。
CSSアニメーション
CSSアニメーションは、CSS遷移効果と同じように呼び出されます。違いは、アニメーションでは、ノードがDOMに挿入された直後に.V-Enterクラスが削除されないが、AnimationEndイベントがトリガーされると削除されることです。
例：（互換性のプレフィックス省略）
<span v-show = "show" v-transition = "bounce">私を見てください！</span>
.bounce-enter {animation：Bounce-in .5s;}。Bounce-Leave {Animation：Bounce-Out .5s;}@keyframes Bounce-in {0％{transform：scale（0）; } 50％{変換：スケール（1.5）; } 100％{変換：スケール（1）; }}@keyframes Bounce-out {0％{transform：scale（1）; } 50％{変換：スケール（1.5）; } 100％{変換：スケール（0）; }}結果
純粋なJavaScript遷移効果
また、CSSトランジションルールを定義せずにJavaScriptフックを使用することもできます。 JavaScriptフックのみを使用する場合、Enter and Leaveフックは完了コールバックを使用する必要があります。そうしないと、同期と呼ばれ、遷移はすぐに終了します。次の例では、jQueryを使用して、カスタムJavaScriptトランジション効果を登録します。
vue.transition（ 'fade'、{enter：function（el、done）{//この時点で要素がdomに挿入されています//アニメーションが完了したときに要素が挿入されました。 {// Enter hook $（el）.animate（{ofacity：0}、1000、done）}、leavecancelled：function（el）{$（el）.stop（）}}）この遷移を定義した後、対応するIDをV-Transitionに指定することで呼び出すことができます。
<p v-transition = "Fade"> </p>
JavaScript遷移効果のみを使用する要素が、他のCSS遷移/アニメーションルールの影響を受ける場合、VUEのCSS遷移検出メカニズムを妨げる可能性があります。この状況に遭遇すると、CSS：Falseをフックオブジェクトに追加することにより、CSSの検出を禁止できます。
徐々に遷移効果
V-TransitionとV-Reepeatの両方を使用する場合、リスト要素にプログレッシブ遷移効果を追加できます。よろめき、エントエントリスガー、または退場の機能（ミリ秒単位）を追加する必要があります。
<div v-repeat = "list" v-transition stagger = "100"> </div>
または、より細かい粒状制御のために、Stagger、Enterstagger、またはEavestaggerフックを提供することもできます。
vue.transition（ 'stagger'、{stagger：function（index）{//各遷移要素に50ms遅延を追加します。例：
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。