vue 過渡的坑

 

 

說一下自己使用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鈎子問題, 歡迎留言.