I have got a element I open using a transition so it's smooth, I then remove the set height when it is done so that the content can define the height.
However when closing the transition doesn't work, it's just an abrupt close.
Vue.component('test', {
template: `<div>
<a href="javascript:void(0)" @click="isActive = !isActive">Expand</a>
<div ref="content" class="content"></div>
</div>`,
data() {
return {
isActive: false
}
},
mounted() {
const _this = this;
this.$refs.content.addEventListener('transitionend', function() {
console.log('end');
_this.$refs.content.classList.add('show');
_this.$refs.content.style.maxHeight = null;
})
},
watch: {
isActive() {
if (!this.isActive) {
this.$refs.content.style.maxHeight = `${300}px`;
return;
}
this.$refs.content.style.maxHeight = null;
this.$refs.content.classList.remove('show');
}
}
});
new Vue({}).$mount('#app');.content {
background: red;
height: 500px;
display: block;
transition: max-height .3s ease;
max-height: 0;
}
.content.show {
max-height: unset;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<test></test>
</div>