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 應⽤
2. 第 12 屆 IT 鐵⼈賽 本⽇⽬標 進階 Svelte Transition 組合技：crossfade 與 animate
3. 第 12 屆 IT 鐵⼈賽 crossfade 將⼀個物件從 A 點送到 B 點
4. 第 12 屆 IT 鐵⼈賽 animate 列表中的 animate 列表中有「重新整理」的動作時執⾏
5. 第 12 屆 IT 鐵⼈賽 FLIP First, Last, Invert, Play https://www.youtube.com/watch?v=RCFQu0hK6bU 先計算兩者之間的距離、差距之後再做動畫
6. 第 12 屆 IT 鐵⼈賽 animate:flip 計算 element 的起始與終點並做動畫