Vue.jsでfadeIn、fadeOutするアニメーションを実装する方法

jQueryにあるフェードイン(以下fadeIn)、フェードアウト(以下fadeOut)するメソッドアニメーションをVue.jsで再現したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
Vue.js slideUp slideDown を実装 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
ボタンをクリックするとfadeInアニメーションが実行。
もう一度クリックするとfadeOutアニメーションが実行されてる事がわかります。
実装手順は以下の通りです。
HTMLを準備
<div id="app">
<button @click="toggle">クリック</button>
<transition name="fade">
<p v-show="show">こんにちは!</p>
</transition>
</div>
Vue.jsでアニメーションを実行するにはtransitionタグを使います。
アニメーションでfadeIn、fadeOutさせたい要素にv-showディレクティブを付与。
name属性(値は任意)を付与したtransitionタグで囲います。
CSSでアニメーションを付与
/* 表示時の状態 */
.fade-enter-from {
opacity: 0;
}
/* 表示時のアクティブ状態 */
.fade-enter-active {
transition: all .5s;
}
/* 表示時の終了状態 */
.fade-enter-to {
opacity: 1;
}
/* 非表示時の状態 */
.fade-leave-from {
opacity: 1;
}
/* 非表示時のアクティブ状態 */
.fade-leave-active {
transition: all .5s;
}
/* 非表示時の終了状態 */
.fade-leave-to {
opacity: 0;
}
transitionタグで囲うと表示・非表示を伴う動作等が行われた場合、上記クラスが状態に応じて切り替わり付与されます。
それぞれのクラスの頭文字には前章で指定したname属性の値が入ります。
それぞれのクラスにtransiton、opacityプロパティを付与。
fadeIn、fadeOutアニメーションが実行されるようプロパティの値を変更します。
Vue.js
const app = Vue.createApp({
data() {
return {
show: false
}
},
methods: {
//クリックしたらshowの真偽値を変更
toggle: function () {
this.show = !this.show
},
}
});
app.mount("#app");
最後にVue.jsで動的要因があったらアニメーションが実行されるようコードを記述すれば終わりです。
以上で実装完了です。
まとめ
Vue.jsでfadeIn、fadeOutするアニメーションを実装する方法について紹介しました。
以上で解説を終わります。