How to animate parent size on child transition?

I have a transition where an item bounces in and out which works just fine with the vue2-animate library but I still cannot figure out how to slide up/down the parent when the transition occurrs so that the content around the parent does not simply jum up and down when the parent’s height changes.

This is the code:

<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight" duration="500">
                <div id="preview" class="row column" v-if="preview">
                    <preview-foo :foo="preview" v-if="preview"></preview-foo>
1 Like

Curious if you ever figured this out, I’m facing the exact same issue. I’ve tried setting

transition: all 1s ease;

on the parent element but that didn’t do the trick.

In the past I’ve just used Greensock for this kind of animation, have a feeling I’ll be reaching for it again if I’m banging my head on this for much longer.

Hard to know without seeing a jsfiddle or something, but often the issue is because the content is hidden instantly which affects the height which is why you see the jump.

Of course! Here you go, I colored everything to make the transition issue as obvious as possible. The red border is the container which isn’t resizing until after the transition is complete.

Here you go The trick is to use max-height and set it to something quite high.

1 Like

Now we’re talkin! Thanks so much =)

Anytime :slight_smile:

I spent a few hours on this yesterday. I would not able to find out this max-height hack.