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
140
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
340
Svelte - 如何在前端框架中脫穎而出 | ModernWeb'21
kjj6198
0
170
状態管理を楽にする道
kjj6198
1
370
Day25. 如何解析 HTML 語法
kjj6198
0
140
Day24. Svelte 如何編譯程式碼(2)
kjj6198
0
190
Svelte 如何編譯程式碼(1)
kjj6198
0
190
Day22. Svelte 經驗談
kjj6198
0
160
Day18. UI 實戰篇 - 圖片檢視器
kjj6198
0
150
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
600
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
57
15k
GraphRAGの仕組みまるわかり
tosuri13
8
530
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
XP, Testing and ninja testing
m_seki
3
230
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
230
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
11k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
260
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
270
エラーって何種類あるの?
kajitack
5
350
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Featured
See All Featured
How to Ace a Technical Interview
jacobian
277
23k
Faster Mobile Websites
deanohume
307
31k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Code Review Best Practice
trishagee
69
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
It's Worth the Effort
3n
185
28k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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