Re: [問題] CSS transition 問題

看板Web_Design作者 (微閣)時間2月前 (2024/02/08 15:50), 2月前編輯推噓7(700)
留言7則, 7人參與, 1月前最新討論串2/2 (看更多)
※ 引述《kisha024 (4545454554)》之銘言: : 大家好 : https://jsfiddle.net/apfjd18m/ : 我有三個div 都有設定transition : 第一個div hover時,會立即變化(沒有transition效果) : 第二個div hover前 有設定border-image-outset hover時有transition效果 : 第三個div hover前 並沒有設定padding-right 而hover時也有transition效果 : 我的疑問在於 既然 border-image-outset 和 padding-right 的預設都是0 : 為什麼hover前 border-image-outset要設定 而padding-right卻不用呢? : 謝謝 (1) div1、div2 行為不同的原因 根據 border-image-outset 在 MDN 上的資訊, 它的 "computed value" 是 "as specified", 且 "animation type" 是 "by computed value type", 表示 transition 時會直接用當下的數值型態進行內插。 https://i.imgur.com/XnV8I0c.png
問題是 border-image-outset 本身支援兩種數值型態: <number> (無單位,如 0、1.5) <length> (有單位,如 0px、1.5rem) div1 初始狀態是預設值的 0, div2 初始狀態則是你設定的 0px, 兩者並不是等效的。 從 transition 的角度來看, 一個是 <number> → <length> (0 → 20px), 另一個則是 <length> → <length> (0px → 20px), 因此只有 div2 能正確內插過程。 這件事跟它是預設值還是使用者設定的數值無關, 只看開始跟結束的數值型態是否相符, 所以如果你把 div2 的 0px 改成 0, 它一樣會失效。 (2) div3 不受影響的原因 padding-right 本身也支援兩種數值型態: <length> <percentage> (需加 %,如 1.5%) 但它的 "animation type" 是 "a length", 表示不管你設定是用哪一種, 最後都會轉換成 <length> 之後才進行內插, 不會有型態不相符的問題。 https://i.imgur.com/jxXZyz6.png
另外, 有人可能會疑惑 padding-right 支援的數值型態並不包含 <number>, 那為何 MDN 上的預設值仍然寫 0 而非 0px 或 0%。 根據 W3C 的規範, <length> 為 0 時其單位是可省略的, 但如果該 property 同時支援 <length> 跟 <number>, 則會優先解釋為 <number>。 https://i.imgur.com/tEsIEU3.png
這也是為什麼大部份 CSS property 不太需要區分 0 跟 0px, 但在 border-image-outset 的例子就需要。 當然這規則只適用 0, 若用其他非 0 的數字都會被瀏覽器視為 invalid 而直接忽略。 https://i.imgur.com/k8YPKOp.png
(3) 額外補充 在 (1) 的說明中, 另一種可行的作法是改用 <number> → <number>, 例如把 div1 的 20px 改成 20。 但如果你實際測試, 會發現它反而變成完全不會動的狀態, 這是因為當數值型態為 <number> 時, 它代表的意義為 border-width 的倍數。 https://i.imgur.com/9S4sZV7.png
然而, 當 border-style 為 "none" 或 "hidden" 時, 不管 border-width 的設定值為多少, 其 "computed value" 都會被強制變為 0, 導致乘上任何倍數都還是 0, 自然就不會有任何動作。 https://i.imgur.com/N1QXOgv.png
所以若要用 <number> 的寫法, 還要先將 border-style 改為非上面兩種值才行, 如以下連結的 div4、div5 所示。 https://jsfiddle.net/7tr1fm93/ 也就是說 <number> → <number> 會跟 border-width 掛勾, <length> → <length> 則不會。 -- 老實說我也不能 100% 確定這就是根本原因, 畢竟沒真的去看底層實作邏輯, 但這是目前結合各項資訊與測試結果後最有可能的推論了。 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 101.137.223.117 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1707378640.A.F72.html ※ 編輯: microloft (101.137.223.117 臺灣), 02/08/2024 16:05:19

02/08 17:57, 2月前 , 1F
02/08 17:57, 1F

02/08 19:51, 2月前 , 2F
02/08 19:51, 2F

02/08 22:44, 2月前 , 3F
謝謝 獲益良多
02/08 22:44, 3F

02/09 02:48, 2月前 , 4F
6
02/09 02:48, 4F

02/11 17:42, 2月前 , 5F
02/11 17:42, 5F

02/12 11:50, 2月前 , 6F
02/12 11:50, 6F

02/23 13:10, 1月前 , 7F
Push
02/23 13:10, 7F
文章代碼(AID): #1bn8VGzo (Web_Design)
討論串 (同標題文章)
本文引述了以下文章的的內容:
完整討論串 (本文為第 2 之 2 篇):
文章代碼(AID): #1bn8VGzo (Web_Design)