【Vue.js】transitionコンポーネントを使ってアニメーションを実装する方法

Vue.jsのtransitionコンポーネントを使用すると、要素の表示・非表示や状態の変化にスムーズなアニメーションを簡単に追加できます。例えば、モーダルウィンドウ、トースト通知、アコーディオンなど、インタラクションを伴うUIに活用できます。本記事では、基本的な使い方からカスタムクラスやJavaScriptフックを用いた高度なアニメーションまで、具体例と共に解説します。

基本的なtransitionの使い方
カスタムクラスを使ってアニメーションを強化する
JavaScriptフックを使って高度なアニメーションを実装する
Vue.jsのアニメーション実装を成功させるポイントまとめ

基本的なtransitionの使い方

以下は、ボタンをクリックすると要素がフェードイン・フェードアウトする基本的な例です。

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, Vue.js!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

transitionタグを使うことで、DOMに要素が追加・削除されるタイミングでクラスが自動的に適用され、スムーズなアニメーションが実現します。クラスの仕組みは以下の通りです：

fade-enter: 表示前の初期状態
fade-enter-active: 表示時のアニメーション
fade-leave-active: 非表示時のアニメーション
fade-leave-to: 非表示の終了状態

カスタムクラスを使ってアニメーションを強化する

アニメーションライブラリ（ここではanimate.css）を使用することで、transitionの表現を大きく広げることが可能です。

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition
      enter-active-class="animate__animated animate__bounceIn"
      leave-active-class="animate__animated animate__bounceOut"
    >
      <p v-if="show">Hello, Vue.js!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
</style>

enter-active-classとleave-active-classでそれぞれ異なるアニメーションを設定することで、見た目にも楽しいUIを実現できます。

JavaScriptフックを使って高度なアニメーションを実装する

CSSでは実現しにくい細かい制御をしたい場合は、JavaScriptのライフサイクルフックを使うことでカスタムアニメーションが可能です。

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <p v-if="show">Hello, Vue.js!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      setTimeout(() => {
        el.style.opacity = 1;
        done();
      }, 500);
    },
    leave(el, done) {
      setTimeout(() => {
        el.style.opacity = 0;
        done();
      }, 500);
    }
  }
};
</script>

done()はアニメーション完了をVueに通知するコールバックで、これを呼ばないとDOMの更新が停止することがあるため注意が必要です。