Vue.js 手风琴中的并发转换答案

【问题标题】：Concurrent transitions in a Vue.js accordionVue.js 手风琴中的并发转换
【发布时间】：2018-07-20 01:10:09
【问题描述】：

我创建了一个 Vue.JS 手风琴，带有折叠/展开手风琴子菜单的过渡。一次只能打开一个子菜单。问题是 Vue 在下一个转换开始之前等待一个转换完成，即使转换分类的所有转换都按预期同时应用。

即选定的手风琴选项卡在当前打开的选项卡开始关闭之前打开。

这是我的模板：

<ul>
  <li @click="expand('i1')" :class="{'active': expanded.i1}"> Item 1
    <transition name="drop">
      <ul v-if="expanded.i1">
        <li><a href="#">Link 1 </a></li>
        <li><a href="#">Link 2 </a></li>
        <li><a href="#">Link 3 </a></li>
        <li><a href="#">Link 4 </a></li>
      </ul>
    </transition>
  </li>
  <li @click="expand('i2')" :class="{'active': expanded.i2}"> Item 2
    <transition name="drop">
      <ul v-if="expanded.i2">
        <li><a href="#">Link 1 </a></li>
        <li><a href="#">Link 2 </a></li>
        <li><a href="#">Link 3 </a></li>
        <li><a href="#">Link 4 </a></li>
      </ul>
    </transition>
  </li>
</ul>

这里是 Vue 实例：

new Vue({
  el: '#app',
  template: template,
  data: {
    expanded: {
      i1: true,
      i2: false
    }
  },
  methods: {
    expand(option) {
      for(let i in this.expanded) {
        this.expanded[i] = i === option;
      }
    }
  }
});

最后是过渡 CSS：

.drop-enter-active, .drop-leave-active {
    transition: max-height 2s linear;
}

.drop-enter, .drop-leave-to {
    max-height: 0;
}

.drop-leave, .drop-enter-to {
    max-height: 500px;
}

这有点难以解释，所以这里用一支笔来说明问题： https://codepen.io/martiensk/pen/WMRmqB

【问题讨论】：

标签： javascript vue.js vuejs2 css-transitions accordion

【解决方案1】：

我发现问题是由我使用 max-height 来制作动画这一事实引起的。相反，我选择了 JS 解决方案。笔已更新。

【讨论】：