在 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 樣式的互相切換,因為不像高度是數值化的,所以即使加入客製化也沒辦法套用動畫樣式,這點需要特別注意!
而 transition 預設的 duration 和 time function 還有 delay 也可另外新增客製化並加入 class 中。