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
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
750
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
NPOでのDevinの活用
codeforeveryone
0
790
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
730
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
360
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
330
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
770
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
120
Goで作る、開発・CI環境
sin392
0
210
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Navigating Team Friction
lara
187
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Site-Speed That Sticks
csswizardry
10
680
Large-scale JavaScript Application Architecture
addyosmani
512
110k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
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