vue 移动端 transition 实现手风琴动画

手风琴动画是指在一组元素中，其中一个元素被展开时，其他元素同时被收缩，形成一个类似于手风琴的效果。在 Vue 移动端开发中，可以使用 transition 动画来实现手风琴效果。

首先，在 HTML 中定义一组需要展开和收缩的元素，可以使用 v-for 指令来动态渲染元素，并绑定一个 active 变量表示当前展开元素的索引：

<div class="accordion">
  <div v-for="(item, index) in items" :key="index" 
       :class="{ active: index === active }">
    <div class="title" @click="toggle(index)">
      {{ item.title }}
    </div>
    <div class="content">
      {{ item.content }}
    </div>
  </div>
</div>

其中，toggle 方法用于切换展开和收缩状态：

methods: {
  toggle(index) {
    this.active = index === this.active ? -1 : index;
  }
}

接下来，在 CSS 中定义手风琴动画的样式，使用 transform 属性实现元素的展开和收缩：

.accordion {
  .title {
    cursor: pointer;
  }
  .content {
    overflow: hidden;
    transition: height 0.3s ease-out;
    &.active {
      height: auto;
      transition: height 0.3s ease-in;
    }
  }
}

其中，active 类用于控制元素的展开和收缩状态，当元素被激活时，添加 active 类，并将高度设置为 auto，实现元素的展开效果；当元素被取消激活时，移除 active 类，并将高度设置为 0，实现元素的收缩效果。

最后，在 Vue 中使用 transition 组件包裹元素，实现动画效果：

<transition name="accordion">
  <div v-for="(item, index) in items" :key="index" 
       :class="{ active: index === active }">
    <div class="title" @click="toggle(index)">
      {{ item.title }}
    </div>
    <div class="content">
      {{ item.content }}
    </div>
  </div>
</transition>

其中，name 属性用于指定动画的名称，可以在 CSS 中定义对应的动画样式。

这样就完成了手风琴动画的实现。