Day9: Svelte 當中的 crossfade 與 animate 機制

第 12 屆 IT 鐵人賽影片教學 — 30 天從 0 到 1 學 Svelte

◼︎ 本集內容：crossfade 與 animate 的使用教學

Svelte 當中有許多內建的動畫機制，可以應付常見的場景，並且用相對少量的程式碼達到不錯的體驗。今天會介紹進階的 crossfade 與 animate 使用方式。

◼︎ 簡報連結：

◼︎ 相關連結：

・Svelte 官網 https://svelte.dev
・FLIP 介紹：https://www.youtube.com/watch?v=RCFQu0hK6bU
・react-flip-toolkit: https://github.com/aholachek/react-flip-toolkit

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day9 - animate / crossfade 應⽤
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   本⽇⽬標
   進階 Svelte Transition 組合技：crossfade 與 animate
   

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   crossfade
   將⼀個物件從 A 點送到 B 點
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   animate
   列表中的 animate
   列表中有「重新整理」的動作時執⾏
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   FLIP
   First, Last, Invert, Play
   https://www.youtube.com/watch?v=RCFQu0hK6bU
   先計算兩者之間的距離、差距之後再做動畫
   

   View Slide

6. 第 12 屆 IT 鐵⼈賽
   animate:flip
   計算 element 的起始與終點並做動畫
   

   View Slide