Vuejsの7番目のVuejs Transition Animation Case包括的な分析

この記事は、編集者が公式文書と組み合わせて編集した、より包括的かつ詳細な説明であり、ますます完全なコードを使用しています。

この記事は公式の文書からのものです。

http://cn.vuejs.org/guide/transitions.html

トランジションアニメーションの関連する知識を見てみましょう。

トランジションアニメーションの定義。

簡単に言えば、モジュールが消えて表示されると表示されて表示される形式です。

トランジションアニメーションを使用する場合は、タグに属性を追加します。

Transition =”トランジションアニメーション名」

例えば：

 <div v-if = "box_1" transition = "mytran"> 1 </div>

これがMytranです。これはトランジションアニメーション名です。クラス名です。アニメーションは、この名前に基づいて複数の異なる拡張機能を追加します（詳細については以下を参照）

transitionトランジションアニメーションバインディングイベント：

【1】v-if

【2】v-show

【3】v-for（挿入して削除するときにのみトリガーされる、自分で書くことも、Vue-animated-Listプラグインを使用することもできます）。

たとえば自分で書く：

 <div v-for = "I in items" transition = "mytran"> {{i}} </div>

簡単なアニメーションライティング方法（以下を参照）

【4】動的コンポーネント。

[5]コンポーネントのルートノードで、VUEインスタンスDOMメソッド（たとえば、vm。$ appendto（el））によってトリガーされます。おそらく、コンポーネントをルートノードに追加します。

③CSSアニメーション：

[1]最初に、遷移属性を持ち、その値を取得する必要があります。

【2】第二に、CSSには値を持つ3つのクラス名があります。

遷移の値がmytranであると仮定すると、クラス名は

説明します

.mytran-transition

アニメーション状態では、CSSの遷移属性がここに配置され、それが表すクラスは常にDOMに存在します。

さらに、ここのスタイルは、ラベルのデフォルトクラスによって提供されるスタイルをオーバーライドします

.mytran-enter

入力すると、コンポーネントはこのCSS状態から現在のCSS状態に拡張され、このクラスには最初のフレームのみがあります。

.mytran-leave

終了すると、コンポーネントは元のCSS状態からこの状態に復元されます。このクラスは、出口の開始から有効になり、出口の最後に削除されます。

コードとして：

 <style> .box {width：100px;高さ：100px;境界線：1px固体赤;ディスプレイ：インラインブロック。 } /*これは、アニメーションの状況と存在するときのスタイルを定義します。このスタイルは、クラスのスタイルをオーバーライドします*/ .mytran-transition {transition：すべて0.3s容易さ。バックグラウンドカラー：Greenyellow; } /* .mytran-enterエントリの開始状態を定義します幅：0; } </style> <div id = "app"> <button @click = "change">クリックして非表示と表示</button> <br/> <div v-if = "box_1" transition = "mytran"> 1 </div> <div v-if = "box_2" transition = "mytran"> 2 </div = "box_3" <script> var vm = new vue（{el： '＃app'、data：{box_1：true、box_2：true、box_3：true}、method：{change：function（）{for（var i = 1; i <4; i ++）{this ['box_'+i] = math.random（）> 0.5？ 300）; </script>

クリックすると、3ブロックが非表示または表示されます。

④javaScriptフック：

[1]簡単に言えば、これはCSSアニメーションに影響しません（これらの3つのカテゴリの変更）。

[2]これは主にそれぞれ4つの瞬間を入力および出発するために使用され、特定のことを行うために使用されます。

【3】これらの8つの瞬間は次のとおりです。

Enter：enter：exter：before（enter）、Enter（Animationが開始される前に）、After（Animation Endeを入力する前に）、EnterCancelled（Enterが中断される前）。

exit：beforeleave（exitの前）、去る（出口アニメーションが始まったばかり）、afterleave（exitアニメーションが終了）、leavecancelled（出口は中断されます）。

[4] DOMの変更は、場合によっては復元されます。たとえば、休暇ステップでDOMのテキストコンテンツプロパティを変更すると、DOMが再入力したときに元の状態が復元されます。ただし、Enterステップで変更された場合、復元されません。

コードとして：

 vue.transition（ 'mytran'、{mytran：function（el）{// console.logを入力する前（ "enter animation start time：" + new date（）。 }、beforeave（el）{console.log（ "Animation Start（）。

customcustom transitionクラス名：

トランジションのクラス名をカスタマイズする理由は、各CSSアニメーションのスタイルがVuejs標準ライティング方法（他のコードによって書かれたコードをダウンロードするなど）に従って記述されることを要求できないためです。

注：関連するVUEインスタンスを宣言する前に、定義を作成する必要があります。

まず第一に、公式VUEJSチュートリアルで推奨されるアニメーションのコレクションをお勧めします。

https://daneden.github.io/anime.css/

ダウンロード後、このCSSファイルをインポートし、アニメーションのカスタマイズを開始します。

 <div id = "app"> <button @click = "change">クリックしてランダムに非表示と表示</button> <br/> <div v-if = "box" transition = "bounce"> 1 </div> </div> <script> vue.transition（ "Bounce"、{enterclass： 'bunceinleft'、vieveclass： 'bunclass：' bunclass el： '＃app'、data：{box：true}、method：{change：function（）{this.box =！this.box; </script>

説明する：

【1】アニメーションクラスを使用するには、動物タグが必要です。

【2】enterclassとleaveclassは、以前のxxx-enterおよびxxx-leaveに相当します。

【3 feef効果は、左からフラッシュし、右からフラッシュアウトすることです。

[4] Vueインスタンスを宣言する前にアニメーションを設定する必要があります。そうしないと、無効になります。

アニメーションを使用します

Vuejsでは、アニメーションアニメーションとトランジションアニメーションが異なります。

簡単に言えば、トランジションアニメーションは3つのステップに分けられます。永久クラス、入力時にクラスがトリガーされ、終了時にクラスがトリガーされます。永久クラスのみが遷移アニメーション属性を持ち、他の2つのステップにはCSS状態しかありません。

アニメーションアニメーションは、入力時にトリガーされたクラスと、終了時にトリガーされるクラスの2つのステップに分割されます。もちろん、XXX-TransitionクラスはDOMに存在します（このクラスを使用して、アニメーションの原点を設定するか、単にこのクラスを設定しないことができます）。

アニメーションアニメーションでは、入力して終了するときのクラスクラスには、アニメーション効果が必要です。たとえば、：

 @KeyFrames FAT {0％{width：100px} 50％{width：200px} 100％{width：100px}} .fat-leave、.fat-enter {animation：fat 1sの両方。 }

入力および終了するとき、実行されたクラス名は遷移と同じであり、xxx-leaveとxxx-enterの形式です。

もちろん、クラス名をカスタマイズすることもできます。

サンプルコード：

 <style> .box {width：100px;高さ：100px;境界線：1px固体赤;ディスプレイ：インラインブロック。 } @KeyFrames fat {0％{width：100px} 50％{width：200px} 100％{width：100px}} .fat-leave、.fat-enter {animation：fat 1sの両方。 } </style> <div id = "app"> <button @click = "change">クリックしてランダムに非表示と表示</button> <br/> <div v-if = "box" transition = "fat"> 1 </div> </div> <script> var vm = new vue（{el： '＃app'、box：{box; }）; </script>

効果：

消える：最初に広く、それから回復してから消えます。

入力：表示、広げ、回復、滞在。

ここで私は怠け者で、同じアニメーション効果を共有しています。

これに加えて、あります

[1]アニメーションタイプを明示的に宣言します（アニメーションにトランジションとアニメーションが同時にある場合、そのうちの1つが異なる状況で実行されます）。

[2]遷移プロセスの詳細な説明（アニメーションがトリガーされたときのJSフック実行とCSS実行の順序）。

[3] CSSアニメーション（つまり、上記のようにアニメーション、詳細で省略）;

[4] JavaScriptの遷移（JSフックではなく、フックは特定の関数が特定の段階で呼び出されることを意味しますが、このフックはアニメーションとは何の関係もありません）、JavaScriptを使用してjQueryのアニメーションメソッドなどのアニメーションを制御します。

【5 bor v-forが使用する段階的な遷移。

当面は利用できないため、省略されています。表示する必要がある場合は、接続を開いてください。

http://cn.vuejs.org/guide/transitions.html

上記は、編集者が紹介した7番目のVuejsのVuejs遷移アニメーションケースの包括的な分析です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！