はじめに

カスタムトランジションクラスとAnimate.cssを用いてアニメーションを実装する方法について備忘録として記載していきます。

カスタムトランジションクラス

今回利用するカスタムトランジションクラスは任意のクラス名を組み込みのトランジションクラスのように使いたいときに利用します。

利用方法

利用方法は割と単純でtransitionタグに以下のように特定のカスタムトランジションクラスを用意し、その中に任意のクラス名を入れます。各トランジションクラスについてはそれぞれ組み込みのトランジションクラスの意味と同様です。

<template>
  <transition
    enter-from-class="任意のクラス名"
    enter-active-class="任意のクラス名"
    enter-to-class="任意のクラス名"
    leave-from-class="任意のクラス名"
    leave-active-class="任意のクラス名"
    leave-to-class="任意のクラス名"
  >
  </transition>
</template>

Enter & Leave トランジション | Vue.js

以上を用いてサンプルを作ってみる

それでは以上を用いてサンプルコードを作ってみます。
今回はおはようボタンをクリックし、あいさつ文が現れたり消えたりする内容にします。文字が現れる際はAnimate.cssのbounceモーションが、文字が消える際はAnimate.cssのflashモーションが適用されるようにしていきます。

Animate.cssはanimate__animated animate__動作のようにクラス名をセットすることで利用が出来ます。

<template>
  <button @click="show = !show">おはようボタン</button>
  <transition
    enter-active-class="animate__animated animate__bounce"
    leave-active-class="animate__animated animate__flash"
  >
    <div v-if="show">{{ greetMessage }}</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      greetMessage: "Good Morning!",
      show: true,
    };
  },
};
</script>

<template>
  <morning></morning>
</template>

<script>
import Morning from "./components/Morning.vue";

export default {
  components: {
    Morning
  },
};
</script>