How to animate parent size on child transition?

Hi,
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>
                </div>
            </transition>
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 https://codepen.io/getreworked/pen/BJEoao. 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:

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