transition 與 transition-group


transition 

 

類似於slot,首先拿到它的子元素,

然后將父元素transition元素上你寫的書寫解析給child.data.transition

 

這樣child.data.transition中就有了需要的數據,

 

 

 

之后在組件初始化過程中定義了很多鈎子函數,在這些鈎子函數間為組件添加類(css)

 

需要v-if和v-show來觸發,是因為 內部通過在create 和 active remove這些鈎子中,處理了自定義的entering leaving這些鈎子,在這些鈎子函數間為組件添加類(css)

 

 

(

資料: 

過渡動畫提供了 2 個時機,一個是 create  activate 的時候提供了 entering 進入動畫,一個是 remove 的時候提供了 leaving 離開動畫。

 

內部使用了window.requestAnimationFrame來執行添加css類和刪除css類的操作。

 

 

 

總結:

vue的transition實現分為下面機構步驟

1.如果應用了css過渡或動畫,在恰當的時機添加/刪除CSS類名。

2.如果過渡組件提供了JavaScript鈎子函數,這些鈎子函數將在恰當的時機被調用。

3.如果沒有找到JavaScript鈎子並且也沒有檢測到CSS過渡/動畫,DOM操作(插入/刪除)在下一幀中立即執行。

所以真正執行的是我們寫的CSS或者是JavaScript鈎子函數,而Vue的<transition>只是幫我們很好地管理了這些CSS的添加/刪除,以及鈎子函數的執行時機。

 

 

 

transition-group

transition-group作用是給多個元素添加動畫

與transition只能作用於第一個子,沒有真實dom不同,transition-group會生成一個真實節點,不指定的話默認是span。而且需要給內部的多個元素指定key,因為在處理動畫的時要通過key找到對應的元素。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM