CSS3-過渡的侷限性以及解決方法
阿新 • • 發佈：2018-12-25
CSS3-過渡的侷限性以及解決方法
CSS3有很多很棒的特性，在一個小專案中，為了實現流暢的視覺效果，採用了CSS3的過渡屬性——transition，為了解決它的侷限性帶來的問題，我採取了一個很不優雅的解決方法，如果有更好的解決方法歡迎評論。
關於transition
用法方面的問題大家可以參考W3school教程這部分的內容
傳送門
簡單描述一下：transition:屬性名 時間[,屬性名 時間];
當transition中描述的屬性變化的時候，就會觸發過渡，過渡的時間我們可以定義，支援單位s或者ms。
通常我們在改變元素的大小，透明度，顏色的時候使用它，這樣使得變化看起來更流暢。於是，問題來了～
## 侷限性
transition 的侷限性在於，如果想進行過渡，我們只能從一個具體值轉化到另一個具體值，而不能進行具體值和auto的轉化，大家可以試一下下面這個例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .test{ width:100px; transition:width 5s, height 5s; background: red; } .test:hover{ width: 200px; height: 200px; } </style> </head> <body> <div class="test"> 這裡有個div </div> </body> </html>
當我們hover到這個div上的時候，我們可以很明顯的觀察到，寬度的變化是過渡的，而高度的變化是瞬時的。這種情況往往發生在容器的大小不確定，要適應內容的多少的情況下。
解決辦法
既然不能進行auto和具體值之間的轉化，我們就在轉化之前為這個元素的屬性進行賦值。以上面的例子為例，我們可以在這個div渲染出來後，通過js獲取到它的高度，然後顯性的設定它的style，之後過渡就可以生效了～
在上面的html程式碼中加入下面這一段
<script> window.onload = function(){ let testDiv = document.getElementsByClassName("test")[0]; console.log(testDiv.offsetHeight); testDiv.style.height = testDiv.offsetHeight + 'px'; }; </script>
同時由於行內樣式有最高的優先順序，所以要把上面的.test:hover中的屬性加上!important:
.test:hover{
width: 200px;
height: 200px!important;
}
就是這樣子～