Vue.js transitionの基本的な使い方

Vue.jsにはテンプレート要素に対してアニメーションの効果を与えるtransition機能があり、JSとCSSを使用してクラスを切り替えてアニメーションをしなくても手軽にアニメーションを実装することができます。

今回はそのVue.jsのtransitionの基本的な使い方についてご紹介します。

transitionを追加できる要素

• 条件付きの描画 (v-if を使用)
• 条件付きの表示 (v-show を利用)
• 動的コンポーネント
• コンポーネントルートノード (Component root nodes)

使い方

transitionタグで囲む

transitionを適用させたい要素をtransitionタグで囲みます。

<transition>
  <p v-if="show">トランジション</p>
</transition>

スタイルの追加

transition ラッパーコンポーネントでは以下のクラスが適用されるので、このクラスにEnterの開始時終了時、Leaveの開始時終了時の状態をスタイルとして定義することでアニメーションをつけていきます。

Enter関係

消えていたものが画面に表示される時のトランジションで以下のクラスが用意されています。

Leave関係

Enterとは逆で画面にあるものが消える時のトランジションで、以下のクラスが用意されています。

各クラスの状態を図で表すと以下ようになります。

Enter/Leave とトランジション一覧 — Vue.js より引用

アニメーションの例（フェードインフェードアウト）

// アクティブ時の設定（アニメーション中）
// 要素が表示される時のトランジション
.v-enter-active {
	transition: opacity 0.5s;
}
// 要素が消える時のトランジション
.v-leave-active {
	transition: opacity 0.5s;
}

// Enterの設定（要素が表示される時）
.v-enter {
	opacity: 0;
}
.v-enter-to {
	opacity: 1;
}

// Leaveの設定（要素が消える時）
.v-leave {
	opacity: 1;
}
.v-leave-to {
	opacity: 0;
}

トランジションを複数箇所で使う

同じトランジションを複数箇所で使用したい場合は以下のようにtransitionタグのname属性を設定することで、トランジションを使い回すことが出来ます。

name属性を設定するとv-だったクラスがname属性-になります。
以下の例の場合v-がfade-になります。

<transition name="fade">
  <p v-if="show">トランジション</p>
</transition>

.fade-enter-active {
	transition: opacity 0.5s;
}
.fade-leave-active {
	transition: opacity 0.5s;
}

.fade-enter {
	opacity: 0;
}
.fade-enter-to {
	opacity: 1;
}

.fade-leave {
	opacity: 1;
}
.fade-leave-to {
	opacity: 0;
}

初期描画時のトランジション

初期描画時にトランジションを適用させたい場合は以下のようにappear属性をtransitionタグに追加します。

<transition appear>
  <p v-if="show">トランジション</p>
</transition>

参考

Enter/Leave とトランジション一覧 - Vue.js