title: Vue3 アニメーションの入力トランジションと出力トランジション
date: 2022-06-07 09:32:00
toc: false
index_img: https://puep.qpic.cn/coral/Q3auHgzwzM4fgQ41VTF2rPqFqGEyYkuRdiaG2TiaYiaZZYzTR5hq7tVRw/0
category:
- フロントエンド
tags: - 自動
- 異なる
- vue
- vue3
- アニメーション
- トランジション
- 入力
- 出力
- JavaScript
元記事：入力トランジションと出力トランジション | Vue.js。このサイトは、保存とレイアウトの調整のためにのみ使用され、営利目的の商業行為は行われません。
#入力トランジションと出力トランジション#
Vue では、要素を挿入、更新、または DOM から削除する際に、さまざまなトランジション効果を適用するための方法が提供されています。これには以下のツールが含まれます。
- CSS トランジションとアニメーションに自動的にクラスを適用する
- animate.cssなどのサードパーティの CSS アニメーションライブラリを統合する
- トランジションフックの間に直接 DOM を操作する
- サードパーティの JavaScript アニメーションライブラリを統合する
ここでは、入力と出力のトランジションについて説明します。また、次のセクションでリストのトランジションとトランジションの状態管理について学ぶこともできます。
#単一要素 / コンポーネントのトランジション#
Vue は、transitionコンポーネントのラッパーを提供しており、次の場合に任意の要素やコンポーネントに入力 / 出力トランジションを追加できます。
- 条件付きレンダリング（
v-ifを使用） - 条件付き表示（
v-showを使用） - 動的コンポーネント
- コンポーネントのルートノード
以下は典型的な例です。
<div id="demo">
<button @click="show = !show">
トグル
</button>
<transition name="fade">
<p v-if="show">こんにちは</p>
</transition>
</div>
const Demo = {
data() {
return {
show: true
}
}
}
Vue.createApp(Demo).mount('#demo')
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
transitionコンポーネント内の要素が挿入または削除されるとき、Vue は次の処理を行います。
- 対象の要素が CSS トランジションまたはアニメーションを適用しているかどうかを自動的に検出し、適切なタイミングで CSS クラスを追加 / 削除します。
- トランジションコンポーネントがJavaScript フック関数を提供している場合、これらのフック関数が適切なタイミングで呼び出されます。
- JavaScript フックが見つからず、CSS トランジション / アニメーションも検出されなかった場合、DOM 操作（挿入 / 削除）は次のフレームで即座に実行されます。（注：これはブラウザのフレームアニメーションメカニズムを指し、Vue の
nextTickの概念とは異なります）
#トランジションクラス#
入力 / 出力のトランジションでは、6 つのクラスが切り替わります。
v-enter-from：入力トランジションの開始状態を定義します。要素が挿入される前に有効になり、次のフレームで要素が挿入された後に削除されます。v-enter-active：入力トランジションが有効な状態を定義します。入力トランジション全体の間に適用され、要素が挿入される前に有効になり、トランジション / アニメーションが完了した後に削除されます。このクラスは、入力トランジションのプロセス時間、遅延、およびカーブ関数を定義するために使用できます。v-enter-to：入力トランジションの終了状態を定義します。要素が挿入された後の次のフレームで有効になります（同時にv-enter-fromが削除され）、トランジション / アニメーションが完了した後に削除されます。v-leave-from：出力トランジションの開始状態を定義します。出力トランジションがトリガーされた直後に有効になり、次のフレームで削除されます。v-leave-active：出力トランジションが有効な状態を定義します。出力トランジション全体の間に適用され、出力トランジションがトリガーされた直後に有効になり、トランジション / アニメーションが完了した後に削除されます。このクラスは、出力トランジションのプロセス時間、遅延、およびカーブ関数を定義するために使用できます。v-leave-to：出力トランジションの終了状態を定義します。出力トランジションがトリガーされた後の次のフレームで有効になります（同時にv-leave-fromが削除され）、トランジション / アニメーションが完了した後に削除されます。
ここで、各クラスはトランジション名のプレフィックスとして追加されます。名前のない<transition>を使用している場合、これらのクラス名のデフォルトのプレフィックスはv-です。たとえば、<transition name="my-transition">を使用している場合、v-enter-fromはmy-transition-enter-fromに置き換えられます。
v-enter-activeとv-leave-activeは、入力 / 出力トランジションの異なるイージングカーブを制御できます。以下のセクションには、例があります。