【Vue3】アニメーションの開始終了イベントを取得する

はじめに

軽くハマったので備忘録として書きます。
結論としては animationstart/end ではなく trasitionstart/end を使うことで動作しました。

作りたいもの

• 要素の回転するときにアニメーションさせる
• 回転中かどうかを検知して他の要素を制御する

間違い

<template>
  <div
    class="transition"
    :style="{ transform: `rotate(${angle}deg)` }"
    @animationstart="rotating = true"
    @animationend="rotating = false"
  >
    ターゲット
  </div>
  <button @click="angle += 90">回転</button>
  <div v-if="rotating">
    回転中
  </div>
</template>

<script setup>
  const angle = ref(0)
  const rotating = ref(false)
</script>

正解

<template>
  <div
    class="transition"
    :style="{ transform: `rotate(${angle}deg)` }"
-   @animationstart="rotating = true"
-   @animationend="rotating = false"
+   @trasitionstart="rotating = true"
+   @trasitionend="rotating = false"
  >
    ターゲット
  </div>
  <button @click="angle += 90">回転</button>
  <div v-if="rotating">
    回転中
  </div>
</template>

<script setup>
  const angle = ref(0)
  const rotating = ref(false)
</script>

参考