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

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

<template>
  <button @click="show = !show">Toggle</button>

  <Transition name="fade">
    <p v-if="show">Hello, Vue.js!</p>
  </Transition>
</template>

<style>
/* 表示・非表示の両方で使う「動き方」の指定 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

/* 表示の開始状態と、非表示の終了状態 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

/* Transition が自動で付け外しする6つのクラス（name="fade" の場合） */

.fade-enter-from   /* 表示の開始状態。要素が挿入される直前に付き、次のフレームで外れる */
.fade-enter-active /* 表示中ずっと付く。transition の長さ・イージングをここに書く */
.fade-enter-to     /* 表示の終了状態。開始の次のフレームで付く */

.fade-leave-from   /* 非表示の開始状態。離脱が始まった直後に付く */
.fade-leave-active /* 非表示中ずっと付く */
.fade-leave-to     /* 非表示の終了状態 */

<script setup>
import { ref } from 'vue'

const saved = ref(true)
</script>

<template>
  <button @click="saved = !saved">切り替え</button>

  <!-- out-in：古い要素が消えてから、新しい要素を表示する -->
  <Transition name="fade" mode="out-in">
    <button v-if="saved" key="edit">Edit</button>
    <button v-else key="save">Save</button>
  </Transition>
</template>

<!-- 初回表示のときにも、トランジションを動かす -->
<Transition name="fade" appear>
  <p>ページを開いたときにフェードイン</p>
</Transition>

<!-- 時間を明示する（CSS から自動検出させたくない場合） -->
<Transition name="fade" :duration="550">...</Transition>
<Transition name="fade" :duration="{ enter: 500, leave: 800 }">...</Transition>

<template>
  <button @click="show = !show">Toggle</button>

  <!-- animate.css のクラス名を、そのまま指定する -->
  <Transition
    enter-active-class="animate__animated animate__bounceIn"
    leave-active-class="animate__animated animate__bounceOut"
  >
    <p v-if="show">Hello, Vue.js!</p>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)

// 0〜1 を duration の間に補間して、毎フレーム opacity に反映する
function animateOpacity(el, from, to, duration, done) {
  const start = performance.now()
  function step(now) {
    const t = Math.min((now - start) / duration, 1)
    el.style.opacity = from + (to - from) * t
    if (t < 1) {
      requestAnimationFrame(step)
    } else {
      done() // 終わったことを Vue に知らせる
    }
  }
  requestAnimationFrame(step)
}

function onBeforeEnter(el) {
  el.style.opacity = 0
}
function onEnter(el, done) {
  animateOpacity(el, 0, 1, 500, done)
}
function onLeave(el, done) {
  animateOpacity(el, 1, 0, 500, done)
}
</script>

<template>
  <button @click="show = !show">Toggle</button>

  <!-- :css="false" で、CSS の検出をやめて JS だけで制御する -->
  <Transition
    :css="false"
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @leave="onLeave"
  >
    <p v-if="show">Hello, Vue.js!</p>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([1, 2, 3, 4, 5])
let next = 6

function add() {
  items.value.splice(Math.floor(Math.random() * items.value.length), 0, next++)
}
function remove(n) {
  items.value = items.value.filter(i => i !== n)
}
</script>

<template>
  <button @click="add">追加</button>

  <!-- tag を指定すると、その要素でラップされる。key は必須 -->
  <TransitionGroup name="list" tag="ul">
    <li v-for="n in items" :key="n" @click="remove(n)">{{ n }}</li>
  </TransitionGroup>
</template>

<style>
/* move は、他の項目の追加・削除で位置が動くときのアニメーション */
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 離脱中の項目をレイアウトから外し、残りの項目がなめらかに詰まるようにする */
.list-leave-active {
  position: absolute;
}
</style>

/* 動きを減らす設定のユーザーには、アニメーションを抑える */
@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}