說一下自己使用vue過渡時爬的坑

第一

<transition v-for=" " key=" " @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">

<div> ... </div>

</transition>

<transiton-group tag=" ">

<div v-for=" " key= " " @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" >

.........

</div>

<transition-group>

分清上面兩個過渡的不同. 雖然都用了v-for, 但 第一個 是單元素的過渡, 第二個 是列表過渡. 要搞清楚.

第二

就是關於afterEnter鉤子. 上面第一種情況(即,單元素過渡中) 連續觸發多個過渡, 有時afterEnter鉤子不執行.

連續觸發3個過渡 卻只執行了2次aterEnter鉤子

afterEnter鉤子只執行了2次,這樣就出問題了.

怎麽解決呢 ? 我不使用afterEnter鉤子, 在enter鉤子中使用了定時器,設置延時時間跟過渡時間一樣.

當然這不是一個好辦法, 但至少解決問題了.

如果要真正的解決問題,還是得看vue源碼, 看是鉤子過渡是怎麽實現的,然後去解決問題, 關鍵是本人現在看源碼還有點困難.

就這樣解決了.

以上就是我在使用vue過渡中爬過的兩個坑.

如果有大神幫解釋一下vue過渡鉤子的源碼,或者用其他辦法解決afterEnter鉤子問題, 歡迎留言.

vue 過渡的坑