Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Day8: Svelte 中的 Transition 機制

Kalan
September 18, 2020

Day8: Svelte 中的 Transition 機制

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

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

Kalan

September 18, 2020
Tweet

More Decks by Kalan

Other Decks in Programming

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