爲什麼轉型的狀態一旦結束就不會維持？

Question

我想稍微擴大basic example for transitions和具有的一個元素div，並在同一時間的另一淡入淡出：

new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
    show: true 
 
    } 
 
})

.fade-enter-active, 
 
.fade-leave-active { 
 
    transition: opacity 2s 
 
} 
 

 
.fade-enter, 
 
.fade-leave-to { 
 
    opacity: 0 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script> 
 
<div id="demo"> 
 
    <button v-on:click="show = !show"> 
 
    Toggle 
 
    </button> 
 
    <transition name="fade"> 
 
    <p v-show="show">hello</p> 
 
    </transition> 
 
    <transition name="fade"> 
 
    <p v-show="!show">hello</p> 
 
    </transition> 
 
</div>

然而，這並不如預期的工作：上面的hello淡出並且下面的一個淡入（到目前爲止），但是然後下面的一個消失並且上面的一個出現（立即，好像狀態已經改變並且沒有轉換）。

當再次單擊該按鈕時，看起來轉換是正確的（它開始於較低的hello淡出並且較高的淡入）。

CSS是對稱的，狀態只在按下按鈕時纔會改變 - 所以我不理解第一次轉換後的立即切換？

Answer 1

v-show隱藏由設置的元件由the documentation解釋display CSS屬性：

v-show簡單地切換所述元件的display CSS屬性。

這樣做會導致元素在轉換完成後消失，即設置了display屬性。元素display: none完全隱藏，沒有任何元素佔用的空間。

您看到的效果並不對稱，因爲隱藏元素時，顯示屬性在過渡結束時設置，但當再次顯示元素時，需要在過渡開始時設置它（否則過渡將不可見）。

如果要避免位置更改，則必須始終將元素保留在計算的佈局中，因此您不能使用display: none來隱藏它，但必須採用其他方式。這也意味着你不能使用v-show。

你可以做的是簡單地使用不同的opacity狀態之間的CSS轉換和過渡：

new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
    show: true 
 
    } 
 
})

.fading-element { 
 
    transition: opacity 2s; 
 
} 
 
.invisible { 
 
    opacity: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script> 
 
<div id="demo"> 
 
    <button v-on:click="show = !show">Toggle</button> 
 
    <p :class="['fading-element', { 'invisible': !show }]">hello</p> 
 
    <p :class="['fading-element', { 'invisible': show }]">hello</p> 
 
</div>