This gist contains different implementations of TransitionExpand found for Vue2 here. Feel free to read his article also, to get idea how he got to the result.
TransitionExpandOriginal.vue
contains original code ported to Vue3. Before hide element it applies same width, setting position absolute with hidden visbility. Doing so DOM element is rendered invisibly, so that its possible to get the element height.TransitionExpandAlternative.vue
on the other side uses elemnts scrollHeight as the final target height. This approach was ispired by vue3-slude-up-down. I like this one more, as it has much less lines and less operations.TransitionExpandTailwind.vue
the last implementation is based on theAlternative
solution, while using tailwind instead of custom written styles. Here I also added props to customize speed of opening/closing animation from the parent component.
<transition-expand>
<div v-if="isVisible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</transition-expand>
By changing isVisible
boolean, the content will expand/collaps.
- Transition allows you to have only one child element at a time. You still can use two elements with
v-if
andv-else
so that either one or another is displayed, but only one may be displayed at once. - Avoid padding and margin on the child element. In case you have margin/padding, wrap it with another
<div>
, so that whole block including padding/margin is animated.
In the original code following CSS is used to try to force hardware acceleration for height animation:
* {
will-change: height;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
While this is working code, I would be careful with this. In case you don't need it - leave it, as the browser starts to use much more resources. So before use - try with and without. I don't use it in our code, as current animation (even withou acceleration) is fine for me.
Exactly, and this is something what was made differently here in comparison with previous plugin.