【Vue.js】アニメーション付きアコーディオンを実装する方法｜transitionとrefを活用

<!-- AccordionItem.vue（方法A：Transition のフックで高さを動かす） -->
<script setup>
import { ref } from 'vue'

defineProps({
  id: { type: String, required: true },
  title: { type: String, required: true }
})

const isOpen = ref(false)

// el は、アニメーションさせる要素（v-show を付けた div）そのもの
function onEnter(el) {
  el.style.height = '0px'
  el.getBoundingClientRect()                 // 0px を確定させる（強制リフロー）
  el.style.height = el.scrollHeight + 'px'   // 中身の高さまで広げる
}
function onAfterEnter(el) {
  el.style.height = ''                       // 高さの固定を解除（中身の増減に追従）
}
function onLeave(el) {
  el.style.height = el.offsetHeight + 'px'   // 今の高さを固定
  el.getBoundingClientRect()
  el.style.height = '0px'
}
function onAfterLeave(el) {
  el.style.height = ''
}
</script>

<template>
  <div class="accordion-item">
    <h3 class="accordion-heading">
      <button
        type="button"
        class="accordion-header"
        :aria-expanded="isOpen"
        :aria-controls="`${id}-panel`"
        @click="isOpen = !isOpen"
      >
        {{ title }}
      </button>
    </h3>

    <Transition
      name="accordion"
      @enter="onEnter"
      @after-enter="onAfterEnter"
      @leave="onLeave"
      @after-leave="onAfterLeave"
    >
      <div v-show="isOpen" :id="`${id}-panel`" class="accordion-content">
        <div class="accordion-body">
          <slot />
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.accordion-header {
  display: block;
  width: 100%;
  padding: 10px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: #f1f1f1;
  border: none;
}
.accordion-heading { margin: 0; }
.accordion-content { overflow: hidden; }
.accordion-body { padding: 10px; }

/* Vue はこのクラスの transition を見て、アニメーションの終了を自動で検出する */
.accordion-enter-active,
.accordion-leave-active {
  transition: height 0.3s ease;
}

/* 「動きを減らす」設定のユーザーには、アニメーションなしで開閉する */
@media (prefers-reduced-motion: reduce) {
  .accordion-enter-active,
  .accordion-leave-active {
    transition: none;
  }
}
</style>

<script setup>
import AccordionItem from './AccordionItem.vue'
</script>

<template>
  <AccordionItem id="faq1" title="質問1">答え1</AccordionItem>
  <AccordionItem id="faq2" title="質問2">答え2</AccordionItem>
  <AccordionItem id="faq3" title="質問3">答え3</AccordionItem>
</template>

<!-- JavaScript だけで制御する場合は :css="false" と done が必要 -->
<Transition :css="false" @enter="onEnter" @leave="onLeave">
  <div v-show="isOpen">...</div>
</Transition>

<script setup>
function onEnter(el, done) {
  // アニメーションが終わったら done() を呼ぶ
  // 例：el.animate(...).finished.then(done)
}
</script>

<!-- AccordionItemRef.vue（方法B：テンプレート参照 ref で高さを測る） -->
<script setup>
import { ref } from 'vue'

defineProps({
  id: { type: String, required: true },
  title: { type: String, required: true }
})

const isOpen = ref(false)
const body = ref(null)       // テンプレート参照：中身の div
const height = ref(0)

function toggle() {
  isOpen.value = !isOpen.value
  // 開くときは中身の高さを測って設定し、閉じるときは 0 に戻す
  height.value = isOpen.value ? body.value.offsetHeight : 0
}
</script>

<template>
  <div class="accordion-item">
    <h3 class="accordion-heading">
      <button
        type="button"
        class="accordion-header"
        :aria-expanded="isOpen"
        :aria-controls="`${id}-panel`"
        @click="toggle"
      >
        {{ title }}
      </button>
    </h3>

    <div
      :id="`${id}-panel`"
      class="panel"
      :class="{ 'is-open': isOpen }"
      :style="{ height: height + 'px' }"
    >
      <div ref="body" class="accordion-body">
        <slot />
      </div>
    </div>
  </div>
</template>

<style scoped>
.panel {
  overflow: hidden;
  visibility: hidden;
  /* 閉じ終わってから visibility を切り替え、Tab で中に入れないようにする */
  transition: height 0.3s ease, visibility 0s linear 0.3s;
}
.panel.is-open {
  visibility: visible;
  transition: height 0.3s ease, visibility 0s;
}
</style>