こんにちは！ここに小さなMがあります（VUEバージョンを一生懸命勉強しています）
今日は、Vueのアニメーションとトランジションを紹介します
アニメーションとトランジションは2つの異なる概念ですが、同じアニメーションを実現することも、組み合わせて使用することもできます。
1.基本的な使用法
公式のVUEドキュメントを見てみましょう
Vue
transitionは、次の場合に任意の要素およびコンポーネントに入口/出口遷移を追加するためのカプセル化されたコンポーネントを提供します
- 条件付きレンダリング（使用
v-if）- 条件付き表示（使用
v-show）- 動的コンポーネント
- コンポーネントルートノード
次の例では、v-showを使用しています
テンプレートタグと同様に、トランジットタグは実際にはDOMツリーに表示されませんが、トランジションが必要なタグを配置することで、多くの不要なトラブルを回避できます。
出入りの移行では、6つのクラススイッチがあります。
v-enter：への遷移の開始状態を定義します。要素が挿入される前に有効になり、要素が挿入された次のフレームで削除されます。v-enter-active：エントリ遷移が有効になるときの状態を定義します。エントリトランジション全体に適用され、要素が挿入される前に有効になり、トランジション/アニメーションが完了した後に削除されます。このクラスは、エントリ遷移プロセス時間、遅延、および曲線関数を定義するために使用できます。v-enter-to：バージョン2.1.8以降で定義されている遷移の終了状態を入力します。要素が挿入された後（v-enter同時にます。v-leave：離脱遷移の開始状態を定義します。脱退遷移がトリガーされるとすぐに有効になり、次のフレームで削除されます。v-leave-active：脱退遷移が有効になるときの状態を定義します。出口遷移フェーズ全体で適用され、出口遷移がトリガーされるとすぐに有効になり、遷移/アニメーションの完了後に削除されます。このクラスを使用して、遷移を残すためのプロセス時間、遅延、および曲線関数を定義できます。v-leave-to：バージョン2.1.8以降では、離脱遷移の終了状態が定義されています。終了トランジションがトリガーされた後（同時に削除さv-leaveれ、トランジション/アニメーションの完了後に削除されます。
と公式イラスト
エッセンスを理解したら、おめでとうございます。右上隅のXをクリックするか、次の記事にスワイプします。
↓↓↓まだ霧の中にいます、おめでとうございます。次のコンテンツを読み続けて、上の写真の具体的な意味を理解することができます↓↓↓
2.アニメーション
cssのアニメーションは、アニメーションと@keyframesの組み合わせであり、VUEで記述する必要がありますが、違いは、VUEのクラス名が指定され、VUEが適切なタイミングで適切なアニメーション効果を呼び出すことです。
ビビは何もない、GIFを参照
上記のコード（アニメーションの意味を理解するには、コード内のコメントを参照してください）：
複数のアニメーションスタイルを区別するために、名前属性がトランジションに追加されます。トランジションに名前属性がない場合、デフォルトのクラス名は.vです。
VUEのmoveBoxのtrue/falseを使用して、divを表示するかどうかを決定します
<button @click="moveBox = !moveBox">showBox</button>
<transition name="move">
<div class="moveBox" v-show="moveBox">这里是小M，现在是动画</div>
</transition>
复制代码export default {
name: "School",
data() {
return {
moveBox: true,
};
},
};
复制代码<style scoped>
/* 进场动画 .transition的name-enter（进入）-active */
.move-enter-active {
animation: move 1s linear;
}
/* 出场动画 .transition的name-leave（离开）-active*/
.move-leave-active {
animation: move 1s reverse;
}
@keyframes move {
from {
/*通过位移，让box消失在最左边 */
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.moveBox {
width: 200px;
height: 50px;
background-color: antiquewhite;
padding: 10px;
}
</style>
复制代码3.移行
GIF：
コード：
.v-enter-activeと.v-leave-activeを組み合わせない場合は、ラベルにトランジションスタイルを追加する必要があります
VUEのmoveBox2のtrue/falseを使用して、divを表示するかどうかを決定します
<button @click="moveBox2 = !moveBox2">showBox</button>
<transition name="move2">
<div class="moveBox" v-show="moveBox2" style="transition: 1s linear">
这里是小M，现在是过渡
</div>
</transition>
复制代码export default {
name: "School",
data() {
return {
moveBox2: true,
};
},
};
复制代码<style scoped>
/* 进入的起点和离开的终点 样式相同 */
.move2-enter,
.move2-leave-to {
transform: translateX(-100%);
}
/* 离开的起点和进入的终点 样式相同 */
.move2-enter-to,
.move2-leave {
transform: translateX(0);
}
.moveBox {
width: 200px;
height: 50px;
background-color: antiquewhite;
padding: 10px;
}
</style>
复制代码上記の4つのクラス名を誰もが理解できるように、浅く絵を描きました。
4.animate.cssサードパーティライブラリ
npm経由でインストール、npm install animate.css
糸を介してインストールし、糸はanimate.cssを追加します
インストールが完了したら、それをインポートし、「animate.css」をインポートします
右側はそのクラス名で、直接コピーできます
を使用する場合は、次の3つの属性を遷移タグに追加する必要があります。
name="animate__animated animate__bounce"
enter-active-class="animate__rubberBand"
leave-active-class="animate__swing"
复制代码名前が示すように、
- 最初は固定名です
- 2番目のアプローチのアニメーションクラス名
- 3番目の外観のアニメーションクラス名
必要なクラス名を選択してコピーするだけで完了です〜
GIF：
コード：
<button @click="animateBox = !animateBox">showBox</button>
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__rubberBand"
leave-active-class="animate__swing"
>
<div class="moveBox" v-show="animateBox">
这里是小M，现在是Animate.css
</div>
</transition>
复制代码import "animate.css";
export default {
name: "School",
data() {
return {
animateBox: true,
};
},
};
复制代码<style scoped>
.moveBox {
width: 200px;
height: 50px;
background-color: antiquewhite;
padding: 10px;
}
</style>
复制代码今日の共有はここにあります。完全なコードが必要な場合は、コメント領域またはプライベートメッセージで私を打つことができます