Struggling with a Vue.JS accordion that has transitions to collapse and expand the sub menus? The issue is that Vue seems to wait for one transition to finish before starting the next, even though all transitions are applied at the same time.
Specifically, the selected accordion tab opens before the currently open tab starts to close.
Below is the template in question:
<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 how I dealt with it using 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;
}
}
}
});
Lastly, the transition CSS used:
.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;
}
For a visual representation of the problem, check out the CodePen here: https://codepen.io/martiensk/pen/WMRmqB