Transition elements below a transitioned v-if

Question

I have two elements, and the top one's visibility is controlled by a v-if on a simple boolean.

transition(name="fade")
    #element1(v-if="showFirst")
        p Foo

#element2
    p Bar

The first element is wrapped in a <transition> tag, exactly as per the Vue documentation.

However, while this does create a fading animation, the rest of the content on the page still jumps very jarringly.

How can I create a transition that will also smoothly transform the position of any and all siblings that follow?

A fiddle demoing this issue.

Answer 1

You need to use a transition-group and key your dynamic div and static div

<transition-group name="fade">
  <div v-if="switc" key="dynamic" class="animated">
     ...
  </div>
  <div key="main-content" class="animated">
     ...
  </div>
</transition-group>

And use this css classes

.fade-enter,
.fade-leave-active {
    opacity: 0;
    transform: translateY(-10px);
}
.fade-leave-active {
    position: absolute;
}

.animated {
  transition: all 0.5s;
  /*display: flex;*/
  width: 100%;
}

The real trick is to change position to absolute when leaving, then any other content can take correct position.

To know more about how Vue animate things please see this FLIP explanation post

And please see this working fiddle https://jsfiddle.net/bjfhth7c/4/

Edit

By mistake I did set display: flex; in .animated class, that was causing to every inner element to render in a strange way.

So now, I completely remove .animate class, and instead apply transition: all 0.5s and width:100% to every direct inner element of .wrapper

My final scss looks like this:

.wrapper {
  display: flex;
  flex-direction: column;
  >* {
    transition: all 0.5s;
    width:100%;
  };
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
  transform: translateY(-10px);
}

.fade-leave-active {
  position: absolute;
}

Flex layout is a extend subject, but in short for this particular case flex-direction: column is arranging elements one bellows previous one.

If one of those elements has absolute position will be ignored in flex layout so any other elements will be redistributed on available space.

Please see this guide about flexbox and last working fiddle hope it helps.