Vue.js Tailwindと相性がいいTransitionのクラス指定方法

Transitionタグによるアニメーションクラスの指定方法がVue3で増えていた。
Tailwindとの親和性が高そう。

Transition

v-ifやv-showによって要素が追加・削除される際にアニメーションを付ける方法として、Transitionタグがあり（v-forによる複数要素にはTransitionGroupタグ）、その中の要素に対してクラスを付与してくれる機能がある。そのクラス名に対してCSSアニメーションのスタイルをあてることで、アニメーションの挙動を指定できる。

Vue3でのTransitionに関するクラスは以下の6つ。(Vue2では一部違うので注意)

• v-enter-from
• v-enter-active
• v-enter-to
• v-leave-from
• v-leave-active
• v-leave-to

デフォルトではクラス名は上記の通りで、vの部分をTransitionタグのname属性で変更できる。

カスタムクラス名

しかしVue3では、それに加えてTransitionタグにenter-active-classなどの属性が増え、そこに直接クラス名を指定できるようになっていた。

つまり、-enter-fromなどの命名ルールに縛られず、自由にクラス名が指定できる。

Tailwindとの相性

この新しい指定方法により、Tailwindを使っている場合はTailwindのデフォルトのクラスがそのまま使える。

Vue2でTransitionとTailwindを併用する際には@applyを使って各クラスにスタイルをあてる必要があり、style内の記述が必須。

<template>
  <transition name="fade">
    <div v-if="showText">Test</div>
  </transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  @apply transition-opacity duration-300;
}
.fade-enter-from,
.fade-leave-to {
  @apply opacity-0;
}
</style>

Vue3では、以下の様に書ける。（styleタグが不要）

<template>
  <transition
    enter-active-class="transition-opacity duration-300"
    leave-active-class="transition-opacity duration-300"
    enter-from-class="opacity-0"
    leave-to-class="opacity-0"
  >
    <div v-if="showText">Test</div>
  </transition>
</template>

記述量が減っているかと言われると、そこまで減っていない気もする。同じスタイルの重複もあるし。

ただ、スタイルとHTML要素が一か所に記述されるので、Tailwindを使うメリットである「HTMLとCSSを行き来することなく開発できる」点を活かすことができる。

※Vue2でTailwindを使ったことが無いので詳しくないですが、もし他の書き方ができ場合はコメントで教えてください。