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找到對應的元素。