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

Vue.jsでは、アコーディオンの開閉を簡単に実装できますが、より自然な動きを実現するためにはアニメーションの工夫が重要です。本記事では、<transition>タグとrefを組み合わせて、スムーズに開閉するアニメーション付きアコーディオンの作り方を解説します。

アコーディオンの基本構成
アニメーションのポイント
refを使う理由
まとめ

アコーディオンの基本構成

まずは、Vueコンポーネント内でアコーディオンの開閉状態を管理するために、isOpenという状態を用意します。

<template>
  <div class="accordion">
    <button @click="toggle">{{ isOpen ? '閉じる' : '開く' }}</button>
    <transition
      name="accordion"
      @enter="onEnter"
      @after-enter="onAfterEnter"
      @leave="onLeave"
      @after-leave="onAfterLeave"
    >
      <div v-show="isOpen" ref="content" class="accordion-content">
        <p>ここにアコーディオンの中身を記述します。</p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    },
    onEnter(el) {
      el.style.height = '0px';
      el.offsetHeight; // 再描画を強制
      el.style.transition = 'height 0.3s ease';
      el.style.height = el.scrollHeight + 'px';
    },
    onAfterEnter(el) {
      el.style.height = 'auto';
    },
    onLeave(el) {
      el.style.height = el.scrollHeight + 'px';
      el.offsetHeight;
      el.style.transition = 'height 0.3s ease';
      el.style.height = '0px';
    },
    onAfterLeave(el) {
      el.style.height = 'auto';
    },
  },
};
</script>

<style scoped>
.accordion-content {
  overflow: hidden;
}
.accordion-enter-active,
.accordion-leave-active {
  transition: height 0.3s ease;
}
</style>