iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
自我挑戰組

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列 第 21

Day 21:我想控制這些動畫效果【Tailwind – Transition 篇】

  • 分享至 

  • xImage
  •  

在 css 裡除了明天會分享的 animation 以外,transition 也可以輕鬆套用、今天也會針對客製化屬性多做著墨哦


在套用 hover 時,如果沒加上 transition 的樣式整個效果就會很死板,所以通常 hover 的效果我們都會加上 transition 做簡單的動畫表現。

圖片 圖片
在 tailwind 中雖然提供的 transition property 不多,但通常也夠用了,畢竟 tailwind 還是有提供 transition: all; 的樣式,但如果真的遇到需要客製化也是在 config 檔案下的 extend 區塊新增 transitionProperty:
transitionProperty: {
    'height': 'height',
}

只是要記得物件屬性與值都要加上成對的引號。另外,transition 本身只針對具有數值化的樣式,也就是說 display: block; <=> display: none; 這種 display 樣式的互相切換,因為不像高度是數值化的,所以即使加入客製化也沒辦法套用動畫樣式,這點需要特別注意!/images/emoticon/emoticon04.gif
而 transition 預設的 durationtime function 還有 delay 也可另外新增客製化並加入 class 中。


上一篇
Day 20:它能不能動起來?【Tailwind – Transform 篇】
下一篇
Day 22:客製我要的動畫【Tailwind – Animation 篇】
系列文
【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言