最近觀看了Rich Harris的<Rethinking Reactivity>視頻，驚嘆于Svelte框架的高效同時，還發現了Vue所不具備的一些關于動畫的原生支持—defer transitions.
先看看Svelte所謂的defer transition的效果吧。
這是使用Svelte做的Todo Demo應用。整個todo分成3個部分。輸入部分，todo列表和done列表。當點擊todo列表中的條目時，相應條目會被“移動”到done列表，反之亦然。
在這里，條目從一個列表轉移到另一個列表，不是很突兀的閃現，而是非常友好地從點擊處，移動到目的地；同時，當列表中條目離開時，剩余的條目會絲滑地向上移動填補空缺的位置。在Svelte里，只需要僅僅加上幾行代碼，就能實現，對于開發者非常友好且高效。 參考如下代碼或者Svelte教程
|
1
2
3
4
5
6
7
8
9
10
|
{#each todos.filter(t => !t.done) as todo (todo.id)} <label in:receive="{{key: todo.id}}" out:send="{{key: todo.id}}" animate:flip> <input type=checkbox on:change={() => mark(todo, true)}> {todo.description} <button on:click="{() => remove(todo)}">remove</button> </label>{/each} |
僅僅在element上加上了in、out和animate屬性。這里，in和out各自接受框架提供的函數receive和send并且給他們提供了篩選條件。 animate屬性接收內置的flip方法。這里的flip不是翻轉，而是FLIP技術技術，vue在<transition-group>中也有用到。主要用于整體移動列表剩余條目去填補所失去元素的位置。
于是我就在想，如果是Vue的話，如何能達到相應的效果呢。 （不想看詳細說明的話，可以直接查看code pen中的代碼）
Vue原生提供了兩個組件支持動畫。transition和transition-group。由于是list的移動，所以我們這里使用transition-group。具體使用方法可以參考Vue教程Transitions & Animation。
要想達到同樣的效果，有兩大UI動畫效果要實現。
列表中條目消失時，剩余條目移動補齊空位
條目消失同時在另外一個列表插入時，條目移動
第一個需求的實現比較簡單，vue原生已經提供了良好的支持，參考Vue文檔中的List-Move-Transitions即可
為了實現第二個需求，有幾個問題必須解決：
- 消失條目的位置信息
- 插入條目的位置信息
- 動效開始與結束的時機
我們先看看前兩個問題的如何解決。根據文檔的介紹，transition-group提供了javascript hook。分別是：
|
1
2
3
4
5
6
7
8
9
|
v-on:before-enterv-on:enterv-on:after-enterv-on:enter-cancelledv-on:before-leavev-on:leavev-on:after-leavev-on:leave-cancelled |
可視化表示的話，大概是如下圖所示：
before-enter: 用于設置插入條目的transition的初始值。此時無法獲取BoundingClientRect. enter: 動效期。此時enter鉤子函數的入參el能獲取boundingClientRect after-enter: 動效結束后的回調函數 enter-cancelled: 取消enter的鉤子
leave也是類似。
所以，我們能拿到條目元素DOMRect信息的時機只有enter和leave的時候。
這樣，我們就可以在leave時候，拿到leave條目的DOMRect數據并且保存起來。在enter的時候， 我們就能同時擁有leave條目和enter條目的位置信息了。
位置信息是拿到了，那怎么才能在條目進入的時候，有從消失條目移動過來的效果呢。（可以先想想， 再看后面的解釋）。
所以，我們想要達成移動的效果，首先需要隱藏掉leave條目元素，
|
1
2
3
4
5
6
|
leave(el, done) { console.log("before leave"); const rect = el.getBoundingClientRect(); sendRectMap.set(el.dataset.key, rect); el.style.display = "none";}, |
然后給enter條目元素設定關于位置初始狀態，初始化的位置即為leave條目元素的位置，然后當transition開始生效的時候，讓其位置恢復到插入（enter）的位置。
這種方法其實就是所謂的FLIP技術。transition-group組件里也使用了這種技術來移動剩余列表填充移走條目空白。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
var first = el.getBoundingClientRect();// Now set the element to the last position.el.classList.add('totes-at-the-end');// Read again. This forces a sync// layout, so be careful.var last = el.getBoundingClientRect();// You can do this for other computed// styles as well, if needed. Just be// sure to stick to compositor-only// props like transform and opacity// where possible.var invert = first.top - last.top;// Invert.el.style.transform = `translateY(${invert}px)`;// Wait for the next frame so we// know all the style changes have// taken hold.requestAnimationFrame(function() { // Switch on animations. el.classList.add('animate-on-transforms'); // GO GO GOOOOOO! el.style.transform = '';}); |
那么接下來的問題就是，在什么時機去設置enter條目元素transition的初始狀態，在什么時機去設置enter條目元素transition的結束時狀態。
按照上面提到的javascript hook,我們可以在before-enter鉤子函數里設置初始狀態，接著在enter鉤子函數里設置transition結束狀態。那么，我們的初始狀態是什么呢？我們通過getBoundingClientRect,可以獲取到enter元素（后用to來標識）的DOMRect數據，包括top, left, bottom, right, width, height , x, y。 同時我們也能通過之前保存的leave位置map獲取到leave條目的位置信息（稱為from）。所以在before-enter時，我們通過計算得到的偏移量，通過translate去初始化to元素的位置。然后再在enter階段，translate其值到from， 再加上transition到css中即可。
在before-enter鉤子中：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 移動元素的標識符const key = el.dataset.key;// enter條目 map，注意這里，在before-enter鉤子中，// receiveRectMap是get不到to的。需要特殊處理。后面有提及const to = receiveRectMap.get(key);// leave條目 mapconst from = sendRectMap.get(key);// 計算偏移量const dx = from.left - to.left;const dy = from.top - to.top;// 初始化to條目的位置el.style.transform = `translate(${dx}px, ${dy}px)`;el.style.opacity = 0; |
在enter鉤子中：
|
1
2
3
4
|
el.style.transition = "all 800ms";el.style.transform = "";el.style.opacity = 1;el.style.display = "block"; |
上面的代碼中，在before-enter里面，to是通過receiveRectMap.get(key)來獲取的。但是，這時，receiveRectMap中還沒有對應key的DOMRect值。雖然，before-enter的入參是el（HTMLElement），但是該el元素的DOMRect中的所有值都為0，所以我們需要在enter方法中，把el塞入到receiveRectMap中。這樣就會有一個矛盾，那就是無法在before-enter中通過translate初始化to元素的位置了。所以，我們這里使用defer transition技術，延遲transition的發生。
我們可以在enter中使用setTimeout或者requestAnimationFrame實現defer transition,
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
requestAnimationFrame(() => { const key = el.dataset.key; // 這樣，receiveRectMap中就有該key的值了。 const to = receiveRectMap.get(key); const from = sendRectMap.get(key); const dx = from.left - to.left; const dy = from.top - to.top; // 由于我們延遲了transition的發生， // 所以to元素的位置其實已經到達了目的地位置， // 所以我們需要使用transition手動地將其過渡到from位置，這一行很重要 el.style.transition = "all 0ms"; el.style.transform = `translate(${dx}px, ${dy}px)`; // 初始化結束后，在下一個animation frame中，使用FLIP技術，使其移動回來。 requestAnimationFrame(() => { el.style.transition = "all 800ms"; el.style.transform = ""; el.style.opacity = 1; el.style.display = "block"; }); }); |
完整代碼可以參考codepen
最后效果：
以上就是如何在Vue中實現Svelte的Defer Transition的詳細內容，更多關于Vue 實現Svelte的Defer Transition的資料請關注服務器之家其它相關文章！
原文鏈接：https://juejin.cn/post/6949441502321836046
