I'm having an issue with a Vue app I created where I need to make an element expand and collapse when a button is clicked. I want the effect to be smooth and animated, but using the <transition> tag alone isn't working as expected. The problem is that I can only get the transition to work properly if I set a fixed height for the element in the CSS, which is not feasible since the content inside the element is dynamic and its height varies.
Here's my current code:
<template>
<input type="button" value="Toggle" v-on:click="showIt = !showIt"/>
<transition name="test-tran">
<div class="test-block" v-show="showIt">
<div v-for="item in items">{{ item }}</div>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
showIt: false
};
}
}
</script>
And here's the related CSS:
.test-block {
/*
Setting a fixed height makes the transition work,
but this approach doesn't account for varying heights
height: 100px;
*/
}
.test-tran-enter-active {
transition: all .5s ease;
}
.test-tran-leave-active {
transition: all .5s ease;
}
.test-tran-enter, .test-tran-leave-to
height: 0;
}
.test-tran-leave, .test-tran-enter-to
/*
Setting a fixed height makes the transition work,
but this approach doesn't account for varying heights
height: 100px;
*/
}
Without explicitly setting the height property, the element does appear and disappear correctly, but without any animation. It just suddenly appears or vanishes.
I really need the animation to work without hard-coding the height in the CSS. Any suggestions on how to achieve this?