Day8: Svelte 中的 Transition 機制

◼︎ 本集內容：Svelte 當中的 Transition 機制

Svelte 內建有相當豐富的 transition 機制，可以透過簡單的語法來達到不錯的 UI 互動。

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day8 - Svelte 當中的 Transition 機制
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   Transition
   UI 中的轉場效果
   modal 開啟、關閉
   漸入漸出
   放⼤、縮⼩
   平移
   

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   Svelte 內建⽀援 Transition 機制
   讚！
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   Svelte Transition 特⾊
   採⽤ css 動畫實作
   簡單語法操作
   可搭配 if 語法
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   Svelte 內建 Transition
   fade
   blur
   fly
   slide
   scale
   draw
   

   View Slide

6. 第 12 屆 IT 鐵⼈賽
   範例 - 基本⽤法
   

   View Slide

7. 第 12 屆 IT 鐵⼈賽
   範例 2 - in / out
   對進場 / 出場做不同的 transition
   

   View Slide

8. 第 12 屆 IT 鐵⼈賽
   參數介紹
   delay: 延遲多久後開始執⾏ transition
   duration: 持續多久
   

   View Slide

9. 第 12 屆 IT 鐵⼈賽
   easing function
   緩動函數
   讓物件的移動更加真實且活潑
   

   View Slide

10. 第 12 屆 IT 鐵⼈賽
    客製化 Transition
    

    View Slide