vue中如何實現過渡動畫?

vue如何實現過渡動畫

通過兩種方式可以實現

class方式

在dom元素髮生變化的時候爲其添加特定的class,從而產生過渡效果

css的過渡狀態
v-enter: 定義進入過渡的開始狀態.
v-enter-active: 定義進入過渡的開始狀態.
v-leave 定義離開過渡的開始狀態
v-leave-active 定義離開過渡的結束狀態

js方式

通過暴露出的過渡系統的鉤子函數,我們在dom變化 的特定時期對其進行屬性的操作,從而產生動畫

監聽動畫結束事件

Vue爲了知道過渡的完成 . 必須設置相應的事件監聽器.這取決於給元素應用的css規則

// 監聽動畫結束事件
    document.getElementsByTagName('p')[0].addEventListener("animationend", function() {
        console.log(1111);
    })