アニメーション効果
- 要素に異なるクラス名を追加するには、vバインドを使用します。これらのクラス名は、アニメーション効果を実現するために事前に記述されたアニメーションです
- トランジションタグを使用して、アニメーション化する必要があるタグをラップする
- 遷移中の子要素には、表示するかどうかを制御するv-showまたはv-ifが必要です
- トランジションタグのname属性は、使用するアニメーション効果を決定します
例
- 最初にアニメーション効果を定義します
.fade-enter-active {
transition: all ease 2s;
}
.fade-enter {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-leave-active {
transition: all ease 2s;
}
.fade-leave {
opacity: 1;
}
.fade-leave-to {
opacity: 0;
}
- これはVueの規則です。形式は次のようにする必要があります
- アニメーション効果名-enter-active
- アニメーション効果名入力
- アニメーション効果名-enter-to
<div id="app">
<h1>动画</h1>
<button @click='flag=!flag'>切换</button></button>
<br />
<transition name='fade'>
<img src="./下载.jpg" width="160" v-if='flag'>
</transition>
</div>
const app = new Vue({
el: "#app",
data: {
flag: {
flag: true }
},
})
- ボタンをクリックしてアニメーション効果を表示します
- ページ効果を見てください
アニメーションクラス名
クラス名入力：
- 遷移に入る開始状態を定義します。要素が挿入され、次のフレームで削除されたときに有効になります。
クラス名-入力-アクティブ：
- 遷移の終了状態を定義します。要素が挿入されたときに有効になり、トランジション/アニメーションの完了後に削除されます。
クラスname-leave：
- 出発遷移の開始状態を定義します。終了遷移がトリガーされたときに有効になり、次のフレームで削除されます。
类名-leave-active：
- 終了遷移の終了状態を定義します。終了遷移がトリガーされたときに有効になり、遷移/アニメーションの完了後に削除されます。
エントリープロセス
- クラス名-入力-アクティブ
- -enter-to
- -入る
去るプロセス
- 类名-leave-active
- -任します
- -去る
移動時の効果
- -移動
アニメーションの原理を理解した後、上記のCSS効果の大きなリストをフレームアニメーションの形式で書くことができます。
@keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; }
}
@keyframes fadeout {
from {
opacity: 1; }
to {
opacity: 0; }
}
.fade-enter-active {
animation: fadeIn ease 2s;
}
.fade-leave-active {
animation: fadeOut ease 2s
}
複数要素の遷移
- 実際、v-ifとv-elseが内部のタグに追加されます
- 内部ラベルに相互排除効果を実現させ、一方のラベルが表示され、もう一方のラベルが消える効果を実現させます（相互排除効果のみである場合もあります）
- すべての子要素が同時に現れたり消えたりすることを理解することは不可能です
<div id="app">
<transition name="fade">
<h1 v-if="isShow">哈哈哈哈</h1>
<h1 v-else>呵呵呵</h1>
</transition>
<button @click='isShow=!isShow'>按钮</button>
</div>
- 現時点では、diffアルゴリズムの存在により、アニメーションは表示されませんでした。ラベルが置き換えられたときに、2つのラベルが変更されていない、つまり、domがまったく変更されておらず、vueが新しいdomを再作成していないため、アニメーションはありませんでした。効果
- 同じタグ名の要素が切り替えられた場合、Vueがそれらを区別できるようにそれらをマークするためにキー機能を通して一意の値を設定する必要があります。そうでない場合、Vueは効率のために同じタグ内のコンテンツのみを置き換えます。
コンポーネントの移行
- 実際にコンポーネントタグを遷移タグでラップします
<transition name="动画效果名">
<component is="组件名"></compoment>
</transiton>
リスト遷移
- 遷移グループ と違う遷移、それは実際の要素として表示されます：デフォルトではスパンです。
- タグ機能により、他の要素に置き換えることができます。
- 子要素に別のキー値を追加する必要があります
<transition-group tag='ul' name="动画效果名">
<li v-for='(item,index) in 数据' key='index'>{
{item}}</li>
</transition-group>
- そうすることで、消えるアニメーション効果が実行されるとき、それは常に最後のものから削除されます
- diffアルゴリズムは、小さい方が常に最後の方であると考えているため、キーの値を数値に設定しないでください。
アニメーションプラグインを使用する
- 最初に、animateなどのプラグインを紹介します
<link rel="stylesheet" href="./animate.min.css">
- プラグインを使用
<transition enter-active-class='rollIn animated' leave-active-class='hinge animated'>
<img src="./下载.jpg" width="160" v-if='flag'>
</transition>
- 効果を見る
