Vue.jsの遷移システムを使用すると、要素がDOMから挿入または削除されたときに遷移効果を自動的に適用できます。 VUE.JSは、適切なタイミングでCSSの遷移またはアニメーションをトリガーし、対応するJavaScriptフック関数を提供して、遷移プロセス中にカスタムDOM操作を実行することもできます。
遷移効果を適用するには、ターゲット要素に遷移機能を使用する必要があります。
<div v-if = "show" transition = "my-transition"> </div>
遷移機能は、次のリソースで使用できます。
•v-if
•V-Show
•v-for（vue-rimated-listプラグインを使用して、挿入と削除の場合にのみ発射）
•動的コンポーネント（紹介についてはコンポーネントを参照）
•コンポーネントのルートノードで、VUEインスタンスDOMメソッド（VM。$ appendto（EL）など）によってトリガーされます。
遷移で要素を挿入または削除する場合、Vueは次のとおりです。
1. ID「My -Transition」を使用したJavaScript Transition Hookオブジェクトを見つけてみてください - Vue.Transition（ID、Hooks）または遷移オプションに登録してください。見つかった場合、対応するフックは遷移のさまざまな段階で呼び出されます。
2. CSS遷移またはアニメーションのターゲット要素を自動的にスニッフィングし、必要に応じてCSSクラス名を追加/削除します。
3. JavaScriptフックが見つからず、CSS遷移/アニメーションが検出されない場合、DOM操作（挿入/削除）が次のフレームですぐに実行されます。
CSS遷移
例
典型的なCSS遷移は次のようなものです。
<div v-if = "show" transition = "Expand"> hello </div>
次に、 `.expand-transition`、` .expand-enter`、 `.expand-leave`のCSSルールを追加します。
/*必須*/。展開transition {transition：すべて.3s容易さ。高さ：30px;パディング：10px;バックグラウンドカラー：#eee;オーバーフロー：hidden;}/* .expand-enterエントリの開始状態を定義* //* .expand-leave出発の終了状態を定義します*/。expand-enter、.expand-leave {height：0;パディング：0 10px;不透明：0;}動的バインディングを介して、同じ要素で異なる遷移を実現できます。
<div v-if = "show"：transition = "transitionName"> hello </div>
New Vue（{el： '...'、data：{show：false、transitionName： 'Fade'}}））さらに、JavaScriptフックを提供できます。
vue.transition（ 'Expand'、{beforeenter：function（el）{el.textcontent = 'before enter'}、enter：function（el）{el.textcontent = 'enter'}、function（el）{el.textcontent = 'afterinter'}、enterceleled：ferfered：unters（el） （el）{el.textcontent = 'beforeleave'}、reave：function（el）{el.textcontent = 'leave'}、alfteLeave：function（el.textcontent = 'afterleave'}、leavecelled：function（el）{// cancellation} {// cancellation}））トランジショナルCSSクラス名
クラス名の追加と切り替えは、遷移属性の値に依存します。たとえば、Transition = "Fade"、3つのCSSクラス名があります。
1..フェードトランジションは常に要素に保持されます。
2 ..フェードエンテルは、遷移に入ることの開始状態を定義します。 1つのフレームのみを適用し、すぐに削除します。
3 ..フェードリーブは、移行を離れるという最終状態を定義します。出発遷移の開始時に効果的で、終了後に削除します。
遷移属性に値がない場合、クラス名はデフォルトで.V-Transition、.V-enter、および.V-Leaveです。
カスタムトランジションクラス名
1.0.14新品
トランジションJavaScript定義でカスタムCSSトランジションクラス名を宣言できます。これらのカスタムクラス名は、デフォルトのクラス名をオーバーライドします。 Animate.cssなどのサードパーティCSSアニメーションライブラリと協力する必要がある場合に非常に便利です。
<div v-show = "ok" transition = "bounce">私がバウンスを見る</div>をご覧ください
vue.transition（ 'Bounce'、{enterclass： 'Bounceinleft'、leaveclass： 'BounceOutright'}）CSS遷移タイプを明示的に宣言します
1.0.14新品
Vue.jsは、移行が終了したときに聞くために、遷移要素にイベントリスナーを追加する必要があります。使用されるCSSに基づいて、イベントはトランジションエンドまたはAnimationEndのいずれかです。 2つのうちの1つのみを使用する場合、Vue.jsは、有効なCSSルールに基づいて、対応するイベントタイプを自動的に推測できます。ただし、場合によっては、要素が同時に2種類のアニメーションを使用する必要がある場合があります。たとえば、VueがCSSアニメーションをトリガーすることを望む場合があり、マウスが吊り下げられたときに要素にはCSS遷移効果があります。この場合、VUEを処理するアニメーションタイプ（アニメーションまたはトランジション）を明示的に宣言する必要があります。
Vue.Transition（ 'Bounce'、{//この遷移効果は、「AnimationEnd」イベントタイプ： 'Animation'}のみを聞くだけです）遷移プロセスの詳細な説明
ショープロパティが変更されると、vue.jsはそれに応じて<div>要素を挿入または削除し、次のルールに従って遷移CSSクラス名を変更します。
•ショーが虚偽になった場合、vue.jsは次のとおりです。
1. beforeleaveフックを呼び出します。
2。v-leaveクラス名を要素に追加して、遷移をトリガーします。
3。休暇フックを呼び出します。
4。トランジションが終了するのを待ちます（トランジションエンドイベントを聞く）。
5. DOMから要素を削除し、Vリーブクラス名を削除します。
6. AfterLeaveフックを呼び出します。
•ショーが真実になった場合、vue.jsは次のとおりです。
1。前のフックを呼び出します。
2. V-Enterクラス名を要素に追加します。
3。domに挿入します。
4. Enterフックを呼び出します。
5。V-Enterを効果的にするために、CSSレイアウトを1回強制します。次に、V-Enterクラス名を削除して遷移をトリガーし、元の要素の状態に戻します。
6.移行が終了するのを待ちます。
7。後のフックを呼び出します。
さらに、エントリトランジションがまだ進行中に要素が削除された場合、EnterCancelledフックは、変更をクリーンアップするか、作成されたタイマーを入力するために呼び出されます。遷移を順番に離れることにも同じことが言えます。
上記のすべてのフック機能が呼び出されると、これはそれらが属するVueインスタンスを指します。コンピレーションルール：どのコンテキストで遷移がコンパイルされているため、このポイントはどのコンテキストです。
最後に、ENTERとLEAVEは、遷移の終了方法を明示的に制御する2番目のオプションのコールバックパラメーターを持つことができます。したがって、CSS TransitionEndイベントを待つ必要はありません。Vue.JSは、トランジションを終了するためにこのコールバックを手動で呼び出すのを待ちます。例えば：
入力：function（el）{// 2番目のパラメーターはありません// CSSトランジションエンドイベントは、トランジションがいつ終了するかを決定します}vs。
Enter：function（el、done）{// 2番目のパラメーターがあります//「done」が呼び出された場合にのみ遷移が終了します}<p>複数の要素が一緒に移行すると、Vue.jsはプロセスをバッチし、レイアウトを1回だけ強制します。
CSSアニメーション
CSSアニメーションの使用は、CSSに移行しています。違いは、アニメーションでは、ノードがDOMに挿入された直後にV-Enterクラス名が削除されないが、AnimationEndイベントがトリガーされると削除されることです。
例：（互換性のプレフィックス省略）
<span v-show = "show" transition = "bounce">私を見てください！</span> .bounce-transition {display：inline-block; /*それ以外の場合は、スケールアニメーションが機能しません*/}。バウンスエンテル{アニメーション：バウンスイン.5S;}。バウンスリーブ{アニメーション：バウンスアウト.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 Fookは完了コールバックを呼び出す必要があります。そうしないと、同期と呼ばれ、遷移はすぐに終了します。
JavaScriptの遷移についてはCSS：Falseを明示的に宣言することをお勧めします。Vue.JSはCSSの検出をスキップします。これにより、CSSルールが不注意に移行を妨害することも妨げられます。
次の例では、jQueryを使用してカスタムJavaScriptトランジションを登録します。
vue.transition（ 'fade'、{css：false、enter：function（el、done）{//要素はdomに挿入されました//アニメーション$（el）.css（ 'ofacity'、0）.anime（{ofacity：1}、1000、done）}}}、function（el） {// Enter $（el）.animate（{ofacity：0}、1000、done）}、leavecancelled：function（el）{$（el）.stop（）}}）次に、遷移機能を使用します。
<P Transition = "Fade"> </p>
漸近遷移
遷移をV-Forと一緒に使用して、漸近遷移を作成できます。遷移要素に機能をよろめく、staggerを止めるか、滞在するか、去ります。
<div v-for = "item in list" transition = "stagger" stagger = "100"> </div>
または、より良いコントロールのために、フックをずらしたり、滞在したり、休暇をとったりすることを提供します。
vue.transition（ 'stagger'、{stagger：function（index）{//各遷移項目は50msの遅延//を追加しますが、最大遅延制限は300ms return math.min（300、index * 50）}}です。この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。