HTML Element is not removed from DOM after transition usage with Vue 2.x

Question

I have an issue with animation.

Standard, all work fine

In normal case, I have this:

<div v-if="update">
    a
</div>
<div v-if="create">
    b
</div>

in the real time DOM I can see this

<!---->
<!---->

and after the first if is truthy this

<div v-if="update">
    a
</div>
<!---->

and after the second if is truthy this (the two if cannot to be truthy in same time)

<!---->
<div v-if="create">
    b
</div>

and if i close all of that I have the initial state

<!---->
<!---->

Well, now I will talk about my problem

Animation, problem

height-transition is an animation I was create like this:

<transition name="height-transition"
    appear
    v-on:enter="enter"
    v-on:before-enter="afterEnter"
    v-on:leave="leave"
    v-on:before-leave="afterLeave">
    <slot></slot>
</transition>

then I apply this animation of two elements like this

<height-transition>
    <div v-if="update" key="update">
        a
    </div>
    <div v-if="create" key="create">
        b
    </div>
</height-transition>

or this

<height-transition>
    <div v-if="update" key="update">
        a
    </div>
    <div v-else-if="create" key="create">
        b
    </div>
</height-transition>

or this

<height-transition>
    <div v-if="update">
        a
    </div>
</height-transition>
<height-transition>
    <div v-if="create">
        b
    </div>
</height-transition>

or this

<height-transition>
    <div v-if="update" key="update">
        a
    </div>
</height-transition>
<height-transition>
    <div v-if="create" key="create">
        b
    </div>
</height-transition>

or this

<height-transition key="update">
    <div v-if="update">
        a
    </div>
</height-transition>
<height-transition key="create">
    <div v-if="create">
        b
    </div>
</height-transition>

I always have the same problem, element are not removed from DOM after the leave/afterLeave animation.

It is interesting to note which from starting state I see this in the real DOM

<!---->
<!---->

and if I open the first I have

<div class="height-transition-enter-active height-transition-enter-to" style="height: 390px; padding-top: 19px; padding-bottom: 19px;">
    a
</div>
<!---->

and then if I open the secon I have this

<div class="height-transition-leave-active height-transition-leave-to" style="height: 0px; padding-top: 0px; padding-bottom: 0px;">
    a
</div>
<!---->
<div class="height-transition-enter-active height-transition-enter-to" style="height: 329px; padding-top: 19px; padding-bottom: 19px;">
    b
</div>

but what I want is this

<!---->
<div class="height-transition-enter-active height-transition-enter-to" style="height: 329px; padding-top: 19px; padding-bottom: 19px;">
    b
</div>

What is the problem ?

Answer 1

To animate multiple elements in one transition, you must use transition-group.

Docs: https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions

Example:

<transition-group name="TRANSITION_NAME">
  <span v-if="create">
    a
  </span>
  <span v-if="update">
    b
  </span>
</transition-group>