Svelte 從小白到入門（九）動畫效果

這是〈Svelte 從小白到入門〉系列的第九集，各集連結如下：

• 〈Svelte 從小白到入門（一）元件、事件、Reactivity〉
• 〈Svelte 從小白到入門（二）Props、邏輯、迴圈、Await〉
• 〈Svelte 從小白到入門（三）事件〉
• 〈Svelte 從小白到入門（四）數據綁定〉
• 〈Svelte 從小白到入門（五）生命週期〉
• 〈Svelte 從小白到入門（六）Store〉
• 〈Svelte 從小白到入門（七）動態效果〉
• 〈Svelte 從小白到入門（八）進出場效果〉
• 〈Svelte 從小白到入門（九）動畫效果〉
• 〈Svelte 從小白到入門（十）Action〉
• 〈Svelte 從小白到入門（十一）CSS Class〉
• 〈Svelte 從小白到入門（十二）Slot〉
• 〈Svelte 從小白到入門（十三）Context〉
• 〈Svelte 從小白到入門（十四）Svelte 的特殊元素〉
• 〈Svelte 從小白到入門（十五）Module Context〉
• 〈Svelte 從小白到入門（十六）Debugging〉
• 〈Svelte 從小白到入門（十七）結束與展望〉

動畫效果

在上一集的 to-do list 範例裡，當一個工項移動到對面，下面的工項會往上補位，這個往上補位的動作，我們可以用 Svelte 的動畫效果讓它更滑順一點。

與上一集的進出場效果不同的是，動畫效果並未牽涉到 HTML 元素的出現與消失，而是既有工項的位移，我們引入 flip 幫我們處理工項從位置 A 移動到位置 B 的動畫：

範例中的工項現在長這樣：

<label
	in:receive="{{key: todo.id}}"
	out:send="{{key: todo.id}}"
	animate:flip="{{duration: 200}}"
>

三個屬性各司其職：

• in: 聲明 <label> 進場時的效果，範例中是 crossfade，receive 表示預期此元素會從某個地方 send 過來，兩者間有移動與 crossfade 的效果，若出場並未來自某個 send，則會呼叫 crossfade 中自定義的 fallback()，{{key: todo.id}} 則是使 crossfade 得以判斷工項的識別碼
• out: 聲明 <label> 出場的效果，其餘同上
• animiate: 聲明當物件並未進出場，而僅是位移時做出動畫效果

Share