VueJS的過渡和CSS動畫

我試圖實現包含CSS動畫兩個元素之間的轉換隻需遵循documentation's example。VueJS的過渡和CSS動畫

我的HTML包含：A鍵來改變我的狀態：

<button @click="toggled = !toggled"> 
    Toggle class ({{ toggled }}) 
</button>

與2名裝填手（紅色和黑色的）過渡：

<transition name="fade" mode="out-in"> 
    <div class="loader" v-if="toggled" key="toggled"></div> 
    <div class="loader red" v-else key="notToggled"></div> 
</transition>

看來，VueJS的轉換正在等待動畫在顯示下一個之前完成。難道我做錯了什麼？

重現此問題：https://jsfiddle.net/f2vozp35/2/

來源

2017-08-29 Thomas Ferro

你能否更詳細一點你要達到什麼樣的解釋？ –

對不起，如果帖子不夠明確，我只是試圖達到@Stephan-v所示的效果，讓我的轉換「順利」運行，而不是延遲，你可以在小提琴中看到。 –

這是你在找什麼：

https://vuejs.org/v2/guide/transitions.html#Explicit-Transition-Durations

更新小提琴：

<transition name="fade" mode="out-in" :duration="300">

https://jsfiddle.net/f2vozp35/3/

Vue.js w ^生病嘗試對轉換做出明智的決定，並等待您的動畫完成，這樣您可以明確定義轉換之間的持續時間。

來源

2017-08-29 12:00:33

謝謝，就是這樣。我雖然是由於裝載機的動畫時間（因爲修改這些定時器縮短了延遲的時間）。 –

-1

嘗試刪除key您的div

<transition name="fade" mode="out-in"> 
    <div class="loader" v-if="toggled"></div> 
    <div class="loader red" v-else></div> 
</transition>

來源

2017-08-29 12:03:29

按鍵用於轉換，如果我刪除它們，轉換不會發生。 –

VueJS的過渡和CSS動畫

回答

相關問題