Vue.js過渡類在動畫完成之前消失

Question

我創建了一個Vue組件，該組件使用JavaScript鉤子作爲轉換來調用velocity.js併爲我的組件創建動畫。

https://www.webpackbin.com/bins/-KiUnEo0HaCp3J4nQ9Gw

組件的slideDown工作正常。然而，當v-on:leave踢。英寸顯示CSS屬性設置爲display: none立即因此我的slideUp動畫不顯示。

我想這會發生，因爲過渡動畫持續時間未知，因此只是簡單地切換顯示none和block之間。

我該如何解決這個問題？

謝謝。

Answer 1

在AccordionItem.vue中，由於您沒有使用CSS進行轉換，因此您需要接受來自Vue的回調，並在轉換完成時通過Velocity通知它。

簡單：

leave(e, done) { 
    Velocity(e, 'slideUp', { duration: 250, complete: done }); 
} 

你可以看到它的工作here

的Vue公司文檔的這section解釋：

當使用JavaScript的只是過渡，需要爲done回調enter和leave掛鉤。否則，它們將被同步調用，並且轉換將立即結束。