How to slide-in an element in a row and animate siblings with relative width in VueJS

Question

I want to slide-in an element in a row and make the other elements width shrink accordingly but still maintain their relative widths:

    <div style="width: 100%; display: flex">
      <div id="firstColumn" style="flex-grow: 1"></div>
      <div id="secondColumn" style="flex-grow: 2"></div>
      <div id="thirdColumn" style="flex-grow: 1" v-if="showColumn"></div>
    </div>

I have tried vue transition on the third column (see CodePen) but the animation does not work as expected and the two other columns just snaps in place. I am guessing that there is a simple/elegant way to do this?

Answer 1

note that in the code-pen you've used .slide-enter which in vue3 should be .slide-enter-from

How elements in the flex get their size

You're using a transform: translate(100%,0) rule on the third element to move it across the screen.
when the flexbox calculates their size for each child, it won't take into account any transforms. It will calculate as if the element is already there in place.
Thus the 'snap' when you click the button.

The size of the children is calculated by looking at the flex-grow, flex-shrink, width, min-width and max-width css properties.

Have size of the column be part of the animation

You can make the size of the new column be part of the animation.
By animating the flex-grow property from 0 to the actual size.
this will cause the siblings to also re-size when the new column is animating.

.slide-enter-active,
.slide-leave-active {
  transition: all 1s;
}

slide-enter-from,
.slide-leave-to {
  transform: translate(100%, 0);
  flex-grow:0 !important;
}

Example

Code pen example

I think you can drop the translate from the animation; but I don't know what you want your animation to look like.