・Vue.jsでTransitionコンポーネントはどう使うの？
こんな疑問にお答えします。
Vue.jsでは「Transition」コンポーネントを活用することで、アニメーションを簡単に実装可能です。
付与されるクラス名に対して、CSSを指定するだけで実装できますからね。
今回は自分用のメモとして「Transition」の使い方をまとめてみました！
参考にどうぞ
ということで、この記事では「Vue.jsのTransitionの使い方」について解説していきます！
・Vue.jsのTransitionの使い方
・Vue.jsのTransitionのクラス名の変更方法
・Vue.jsのTransitionのクラス名の変更方法②
・Vue.jsのTransitionの初回描画時の適用
・Vue.jsのTransitionのmodeを使用
・Vue.jsのTransitionのCSSアニメーション実装
目次
【解説】Vue.jsのTransitionの使い方
そんなTransitionを使ったアニメーション例がこちら↓
See the Pen vue transition① by jito-coder (@jito-coder) on CodePen.
v-ifを用いて、ボタンをクリックしたら表示／非表示されるプログラムを実装しております。
表示／非表示する時、透過アニメーションが実装されますよね。
これがTransitionを使った実装となります。
コードがこちら↓
<script setup lang="ts">
import { ref } from 'vue';
const toggleItem = ref(true)
</script>
<template>
<Transition>
<div class="box" v-if="toggleItem">要素</div>
</Transition>
<button v-on:click="toggleItem = !toggleItem">クリック</button>
</template>.v-enter-from {
opacity: 0;
}
.v-enter-active {
transition: opacity .5s;
}
.v-enter-to {
opacity: 1;
}
.v-leave-from {
opacity: 1;
}
.v-leave-active {
transition: opacity .5s;
}
.v-leave-to {
opacity: 0;
}Transitionの基本的な使い方がこちら↓
- Transitionコンポーネントを記述
- 直下に1つの要素を入れる
- 直下の要素を表示・非表示させる
- 付与されるクラスに対してCSSを指定
順に解説してきます。
templateタグ内に下記の様に記述します。
<Transition>
</Transition>この中に適用させたい要素を入れていきます。
続いて要素を入れるのですが、注意点があります。
それはTransitionコンポーネントの直下の要素は1つだけにしておくことです。
<Transition>
<!-- 直下に1つだけ -->
<div class="box" v-if="toggleItem">要素</div>
</Transition>上記だとdivタグ要素1つだけですね。
下記のように2あるとエラーがでてしまいます。
ただしネストされている場合はOKです。
<Transition>
<!-- これはNG -->
<div class="box" v-if="toggleItem">要素</div>
<div class="box2" v-if="toggleItem2">要素</div>
</Transition>
<Transition>
<!-- これはOK -->
<div class="box" v-if="toggleItem">
<div>要素１</div>
<div>要素２</div>
</div>
</Transition>また下記のような「v-if」「v-else」を用いた場合も、実質1つだけしか表示はされないのでOKです。
<Transition>
<!-- これはOK -->
<div class="box" v-if="toggleItem">要素</div>
<div class="box" v-else="toggleItem">要素</div>
</Transition>Transitionコンポーネントは、直下の要素が表示・非表示することで機能してくれます。
そのため「v-if」「v-show」「動的コンポーネントによる変更」「key属性の値の変更」などが必要なんですよね。
今回は例として直下の要素に対して、「v-if」を使用しました。
<Transition>
<div class="box" v-if="toggleItem">要素</div>
</Transition>
【解説】Vue.jsのv-ifとv-showの違いと使い分け【コード付き】 あとはTransitionにより付与されるクラス名に対して、CSSを適用すれば実装完了です。
付与されるクラス名がこちら↓
/* 表示する時の初期状態 */
.v-enter-from {}
/* 表示する時のトランジションを書く */
.v-enter-active {}
/* 表示する時の最後の状態 */
.v-enter-to {}
/* 非表示する時の初期状態 */
.v-leave-from {}
/* 非表示する時のトランジションを書く */
.v-leave-active {}
/* 非表示する時の最後の状態 */
.v-leave-to {}「v-enter-〇〇」は要素が表示される瞬間、「v-leave-〇〇」は要素が非表示される瞬間に付与されます。
クラスのつくタイミングがこちらになります↓
- 表示される直前：.v-enter-fromクラスが付与
- 表示される瞬間：.v-enter-fromが削除。.v-enter-activeと.v-enter-toが付与
- 表示アニメーションが終了後：.v-enter-activeと.v-enter-toが削除
- 非表示される直前：.v-leave-fromクラスが付与
- 非表示される瞬間：.v-leave-fromが削除。.v-leave-activeと.v-leave-toが付与
- 非表示アニメーションが終了後：.v-leave-activeと.v-leave-toが削除。
このタイミングに合わせて、下記のようにCSSを指定すればアニメーションを簡単に実装することができます。
/* 表示する時の初期状態 */
.v-enter-from {
opacity: 0;
}
/* 表示する時のトランジションを書く */
.v-enter-active {
transition: opacity .5s;
}
/* 表示する時の最後の状態 */
.v-enter-to {
opacity: 1;
}
/* 非表示する時の初期状態 */
.v-leave-from {
opacity: 1;
}
/* 非表示する時のトランジションを書く */
.v-leave-active {
transition: opacity .5s;
}
/* 非表示する時の最後の状態 */
.v-leave-to {
opacity: 0;
}ちなみにこんな感じでまとめれば、短くシンプルに記述できます。
.v-enter-from, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity .5s;
}
.v-enter-to, .v-leave-from {
opacity: 1;
}【解説】Vue.jsのTransitionのクラス名の「v-」を変える方法
先ほど紹介した例だと「v-enter-〇〇」「v-leave-〇〇」のように、クラス名が固定されちゃいます。
実はこの「v」の部分の名前は、変えることが可能です。
Transitionタグにname属性をつければ、その値が「v-」部分のクラス名となります。
例として「hello」という値をつけました↓
<Transition name="hello">
<div class="box" v-if="toggleItem">要素</div>
</Transition>これで「hello-enter-〇〇」や「hello-leave-〇〇」のようにクラス名が変更されます。
この場合「v-」から始まるクラス名は適用されなくなるよ
そのためCSSの指定も下記のように変更して実装しましょう。
.hello-enter-from {
opacity: 0;
}
.hello-enter-active {
transition: opacity .5s;
}
.hello-enter-to {
opacity: 1;
}
.hello-leave-from {
opacity: 1;
}
.hello-leave-active {
transition: opacity .5s;
}
.hello-leave-to {
opacity: 0;
}【解説】Vue.jsのTransitionのクラス名を変える方法
先述したのは「v-」部分のみクラス名を変える方法でした。
ただ場合によっては、「v-enter-〇〇」「v-leave-〇〇」丸ごとクラス名を変更したいかと。
実はある方法を使えば、変更が可能です。
Transitionタグに対して、それぞれのクラス名を変更できるpropsを活用すれば実装できます。
そんなpropsがこちら↓
<Transition
enter-from-class="クラス名を記述"
enter-active-class="クラス名を記述"
enter-to-class="クラス名を記述"
leave-from-class="クラス名を記述"
leave-active-class="クラス名を記述"
leave-to-class="クラス名を記述"
>
<div class="box" v-if="toggleItem">要素</div>
</Transition>それぞれの値に対して任意のクラス名を記述します。
するとそのクラス名が適用されます。
実際にクラス名を上書きしたコードを書いてみました。
<Transition
enter-from-class="hello01"
enter-active-class="hello02"
enter-to-class="hello03"
leave-from-class="hello04"
leave-active-class="hello05"
leave-to-class="hello06"
>
<div class="box" v-if="toggleItem">要素</div>
</Transition>.hello01 {
opacity: 0;
}
.hello02 {
transition: opacity .5s;
}
.hello03 {
opacity: 1;
}
.hello04 {
opacity: 1;
}
.hello05 {
transition: opacity .5s;
}
.hello06 {
opacity: 0;
}こんな感じでクラス名を変えることができ、CSSにて指定すればアニメーションの実装ができます。
【解説】Vue.jsのTransitionを初回描画時からアニメーション適用
Transitionによるアニメーションを、初回描画時から適用させたいときありますよね。
ようはリロードした瞬間からアニメーションさせるということ。
実は簡単に実装可能です。
「appear属性」をつければ、初回描画時からアニメーションを適用させることができます。
<Transition appear>
<div class="box" v-if="toggleItem">要素</div>
</Transition>これでロード時から適用可能です。
【解説】Vue.jsのTransitionでmodeを使用
Transitionによるアニメーションで「v-if」「v-else」にて、2つの要素を表示・非表示させることありますよね。
ただ通常のやり方だと、下記みたいにカクカクします。
See the Pen vue transition② by jito-coder (@jito-coder) on CodePen.
<template>
<Transition>
<div class="box" v-if="toggleItem">要素01</div>
<div class="box" v-else="toggleItem">要素02</div>
</Transition>
<button v-on:click="toggleItem = !toggleItem">クリック</button>
</template>要素が非表示になる前に、もう一つの要素が表示されちゃってます。。
実はこれ簡単に対策できます。
結論として「mode=”out-in”」をTransitionタグに使えば対策可能です。
See the Pen vue transition③ by jito-coder (@jito-coder) on CodePen.
<Transition mode="out-in">
<div class="box" v-if="toggleItem">要素01</div>
<div class="box" v-else="toggleItem">要素02</div>
</Transition>これで要素が非表示になってから、表示されるようになり良い感じにアニメーションが実装されます。
【解説】Vue.jsのTransitionでCSSアニメーションを実装
最後にkeyframesを使ったCSSアニメーションを、Transitionにて実装する方法を紹介していきます。
それがこちら↓
.v-enter-active {
animation: test-anime 1s;
}
.v-leave-active {
animation: test-anime 1s reverse;
}
@keyframes test-anime {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}keyframesを使う場合「-active」クラスにて指定すれば、実装ができちゃいます。
ただ「v-leave-active」に対しては「reverse」を指定しましょう。
【解説】Vue.jsのTransitionの使い方【クラス名変更／初回描画時】：まとめ
- Transitionコンポーネントの直下の要素は1つだけにしておく
- 直下の要素が表示・非表示することで機能する
- name属性を使えば「v-」部分のクラス名が変更可能
- propsの活用で丸ごとクラス名の変更可能
- 「mode=”out-in”」を使えば2つの要素の表示／非表示の対策可能
- appear属性を使えばロード時もアニメーション適用可能
Vue.jsのTransitionを使う時はためしてみてね！
