vue3 折叠面板动画

以下是Vue3实现折叠面板动画的示例代码：

<template>
  <div class="accordion">
    <div class="accordion-item" v-for="(item, index) in items" :key="index">
      <div class="accordion-header" @click="toggle(index)">
        {{ item.title }}
        <span class="icon" :class="{ 'is-active': item.open }"></span>
      </div>
      <div class="accordion-content" :style="{ height: item.open ? item.height + 'px' : 0 }" @transitionend="transitionEnd(index)">
        <div class="inner">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([
      {
        title: '折叠面板1',
        content: '这是折叠面板1的内容',
        open: false,
        height: 0,
      },
      {
        title: '折叠面板2',
        content: '这是折叠面板2的内容',
        open: false,
        height: 0,
      },
      {
        title: '折叠面板3',
        content: '这是折叠面板3的内容',
        open: false,
        height: 0,
      },
    ]);

    const toggle = (index) => {
      items.value[index].open = !items.value[index].open;
      if (items.value[index].open) {
        items.value[index].height = document.querySelector(`.accordion-item:nth-child(${index + 1}) .accordion-content .inner`).offsetHeight;
      } else {
        items.value[index].height = 0;
      }
    };

    const transitionEnd = (index) => {
      if (!items.value[index].open) {
        items.value[index].height = 0;
      }
    };

    return {
      items,
      toggle,
      transitionEnd,
    };
  },
};
</script>

<style>
.accordion {
  .accordion-item {
    .accordion-header {
      cursor: pointer;
      .icon {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-left: 10px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
        &.is-active {
          transform: rotate(-135deg);
        }
      }
    }
    .accordion-content {
      overflow: hidden;
      transition: height 0.3s ease;
      .inner {
        padding: 10px;
      }
    }
  }
}
</style>