I have a main container and an inner container. The inner container is displayed using v-if. I want to include a transition effect on the inner element, but after the transition ends, the height of the parent container changes abruptly and looks unattractive.
I am looking for something similar to jQuery's slideToggle() function.
Below is the HTML in which I am applying a fade effect through a transition in opacity:
<div class="my-div">
<p>some content</p>
<transition name="fade" mode="out-in">
<p key=1 v-if="show">hello</p>
</transition>
</div>
And here is the CSS for the transition:
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.my-div {
background: lightgreen;
}
Here is the fiddle with my code:
https://jsfiddle.net/x15Lw6a3/
I have attempted to achieve a height transition by changing from opacity to height or max-height as suggested by other questions, but it results in a sudden snap up and down.
If you have any ideas or can point me to a tutorial, I would greatly appreciate it. Thank you!