Concurrent transitions in a Vue.js accordion

Question

I have created a Vue.JS accordion with transitions that collapse / expand the accordion sub menus. Only one sub menu should be open at a time. The problem is that Vue waits for the one transition to complete before the next one starts, even though the transition classed are all applied at the same time as expected.

I.e. the selected accordion tab opens before the currently opened tab starts to close.

Here is my template:

<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>

Here is the Vue instance:

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;
      }
    }
  }
});

And finally the transition 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;
}

It's a bit hard to explain, so here is a pen that shows the problem: https://codepen.io/martiensk/pen/WMRmqB

Martiens Kropff Martiens Kropff · Accepted Answer · 2018-02-14T15:43:18

I discovered that the problem was caused by the fact that I was using max-height to animate. I have instead opted for a JS solution. The pen has been updated.

Concurrent transitions in a Vue.js accordion

1 Answers