• Vue.js

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

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