使用Vue 2.x轉換後，HTML元素不會從DOM中刪除

Question

我有一個動畫問題。

標準，所有做工精細

在正常情況下，我有這樣的：

在實時DOM

我可以看到這個

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

和之後的第一if is truthy this

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

和第二if後是truthy此（兩個如果無法在同一時間truthy）

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

，如果我關閉所有的我有初始狀態

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

那麼，現在我會談談我的問題

動畫，問題

height-transition是一個動畫我被創建這樣的：

<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> 

然後我應用此動畫像這樣

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

兩個元件或該

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

或該

的

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

或該

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

或該

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

我總是有相同的問題，leave/afterLeave動畫完成後，元件不會從DOM移除。

有趣的是，要注意從起始狀態我看到這個真實的DOM

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

，如果我打開第一我有

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

，然後，如果我打開我有這個secon

<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> 

但我想這是

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

問題是什麼？

Answer 1

要在一個transition動畫多個元素，則必須使用transition-group。

文檔：https://vuejs.org/v2/guide/transitions.html#List-Transitions

實施例：

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