Written by Kasumi

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するアニメーションを実装する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

Vue.js

Vue.jsをCDNで導入・html環境に構築する方法【バージョン3対応】

2022.08.25
2153
Vue.js

【Vue.js】v-modelを使いselectの値を取得。初期値を設定する方法

2022.09.25
16447
Vue.js

Vue.jsでスムーススクロールを実装する方法【vue-scrolltoライブラリを使おう】

2022.09.04
5039
Vue.js

Vue.jsでjsonデータを読み込む方法【axiosを使おう】

2022.09.29
9951