I have two divs that i transition between using transition-group, which works as it should - however, the content below the divs transitioning, is "jumping" depending on the height of the divs. What I want it that jumping being prevented, and instead it animates somehow, so I get a nice smooth transition when switching between elements without it "pushing" down to content with a "jump"..
Hope it makes sense :)
I've setup an example on codesandbox here: https://codesandbox.io/s/reverent-stallman-8ixhp?file=/src/components/HelloWorld.vue
The template looks like:
<div class="hello">
<button @click="groupShowOne">Show first {{ gShowFirst }}</button>
<button @click="groupShowTwo">Show second {{ gShowSecond }}</button>
<transition-group name="fade-group" tag="div" mode="out-in" appear>
<div
class="group-element"
v-if="gShowFirst"
style="background-color: yellow"
>
<h3>This is a headline</h3>
<p>This is a text</p>
</div>
<div
class="group-element"
v-if="gShowSecond"
style="background-color: red"
>
<h3>
This is a headline <br />This is a headline <br />This is a headline
This is a headline This is a headline This is a headline
</h3>
<p>
This is a text This is a text This is a text This is a text This is a
text v This is a text v <br />This is a text This is a text This is a
text This is a text This is a text v This is a text v <br />This is a
text This is a text This is a text This is a text This is a text v
This is a text v
</p>
</div>
</transition-group>
<div style="background-color: blue; min-height: 500px; color: #FFF">
Prevent this div from jumping<br />
</div>
</div>
The animation looks:
<style scoped>
.group-element {
width: 100%;
min-height: 100px;
max-height: 20000px;
transition: all 0.5s;
}
.fade-group-enter,
.fade-group-leave-to {
opacity: 1;
}
.fade-group-leave-active {
opacity: 0;
position: absolute;
}
</style>
Try this
The div: