將CSS3過渡設置爲無

如何使CSS過渡在媒體查詢或任何其他情況下無法工作？例如：將CSS3過渡設置爲無

@media (min-width: 200px) { 
    element { 
     transition: width 1s; 
    } 
} 

@media (min-width: 600px) { 
    element { 
     transition: none; // SET TO NO TRANSITION 
    } 
}

來源

2012-08-07 shrewdbeans

您可以將轉換屬性設置爲無。這樣，將不會應用轉換效果。

像這樣：

-webkit-transition-property: none; 
-moz-transition-property: none; 
-o-transition-property: none; 
transition-property: none;

來源

2012-08-07 17:34:20

標準屬性不應該在特定於供應商的屬性之後持續嗎？ – Daze 2013-11-22 09:49:30

這是正確的。 – 2013-11-22 09:51:26

+12

難道你不能只設置'transition：none'（加上前綴如果需要）？ – tomekwi 2015-01-26 11:06:24

transition: width 0s

應該做的伎倆 - 因爲它基本上是說有一個過渡，但0太快看看吧！

來源

2012-08-07 15:03:29

不是一個真正的解決方案，如果你的過渡是縮放元素 – PUG 2012-12-26 03:09:06

謝謝！代碼不會太長:) – 2017-02-14 08:20:19

甚至比配置過渡性質到沒有是設置過渡時間到更好。

這是跨瀏覽器的代碼：

-webkit-transition-duration: 0s; 
-moz-transition-duration: 0s; 
-o-transition-duration: 0s; 
transition-duration: 0s;

這是爲什麼好？因爲默認情況下，符合標準的瀏覽器（例如Firefox）會爲每個元素設置轉換屬性至全部。他們還設置過渡期到0s。因此，通過設置轉換時間段到0s，您可以最接近地匹配瀏覽器如何定義沒有轉換的元素。

設置過渡時間到默認呈現過渡性質無關。

來源

2016-12-14 10:26:04 RockPaperLizard

將CSS3過渡設置爲無

回答

相關問題