Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Day8: Svelte 中的 Transition 機制
Search
Kalan
September 18, 2020
Programming
0
130
Day8: Svelte 中的 Transition 機制
◼︎ 本集內容:Svelte 當中的 Transition 機制
Svelte 內建有相當豐富的 transition 機制,可以透過簡單的語法來達到不錯的 UI 互動。
Kalan
September 18, 2020
Tweet
Share
More Decks by Kalan
See All by Kalan
單頁式應用中的無障礙設計
kjj6198
0
770
選擇 Svelte 的三個理由 - JSDC
kjj6198
0
330
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
160
状態管理を楽にする道
kjj6198
1
360
Day25. 如何解析 HTML 語法
kjj6198
0
140
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
180
Svelte 如何編譯程式碼(1)
kjj6198
0
180
Day22. Svelte 經驗談
kjj6198
0
150
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
150
Other Decks in Programming
See All in Programming
2025-04-25 GitHub Copilot Agent ライブデモ(スクリプト)
goataka
0
120
開発者フレンドリーで顧客も満足?Platformの秘密
algoartis
0
230
In geheimer Mission: AI Agents entwickeln
joergneumann
0
120
Designing Your Organization's Test Pyramid ( #scrumniigata )
teyamagu
PRO
5
1.6k
CursorとDevinが仲間!?AI駆動で新規プロダクト開発に挑んだ3ヶ月を振り返る / A Story of New Product Development with Cursor and Devin
rkaga
5
1.1k
Global Azure 2025 @ Kansai / Hyperlight
kosmosebi
0
160
マイコンでもRustのtestがしたい/KernelVM Kansai 11
tnishinaga
1
920
M5UnitUnified 最新動向 2025/05
gob
0
140
オープンソースコントリビュート入門
_katsuma
0
140
はじめてのPDFKit.pdf
shomakato
0
110
データと事例で振り返るDevin導入の"リアル" / The Realities of Devin Reflected in Data and Case Studies
rkaga
3
2.5k
バイラテラルアップサンプリング
fadis
3
600
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building an army of robots
kneath
305
45k
Done Done
chrislema
184
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How GitHub (no longer) Works
holman
314
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
What's in a price? How to price your products and services
michaelherold
245
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
Transcript
第 12 屆 IT 鐵⼈賽 30 天從 0 到 1
學 Svelte Day8 - Svelte 當中的 Transition 機制
第 12 屆 IT 鐵⼈賽 Transition UI 中的轉場效果 modal 開啟、關閉
漸入漸出 放⼤、縮⼩ 平移
第 12 屆 IT 鐵⼈賽 Svelte 內建⽀援 Transition 機制 讚!
第 12 屆 IT 鐵⼈賽 Svelte Transition 特⾊ 採⽤ css
動畫實作 簡單語法操作 可搭配 if 語法
第 12 屆 IT 鐵⼈賽 Svelte 內建 Transition fade blur
fly slide scale draw
第 12 屆 IT 鐵⼈賽 範例 - 基本⽤法
第 12 屆 IT 鐵⼈賽 範例 2 - in /
out 對進場 / 出場做不同的 transition
第 12 屆 IT 鐵⼈賽 參數介紹 delay: 延遲多久後開始執⾏ transition duration:
持續多久
第 12 屆 IT 鐵⼈賽 easing function 緩動函數 讓物件的移動更加真實且活潑
第 12 屆 IT 鐵⼈賽 客製化 Transition