2012-03-30 70 views
3

我已經開始在我的一個項目中使用CSS3轉換,並且我發現我基本上都希望爲每個在懸停時更改它的元素都在背景顏色上進行轉換。在所有元素上設置全局背景CSS3轉換是否有缺點?

如果我這樣做

a { 
    transition-property: background; 
    transition-duration: 0.15s; 
    transition-timing-function: ease-out; 
    transition-delay: 0; 
} 

甚至

* { 
    transition-property: background; 
    transition-duration: 0.15s; 
    transition-timing-function: ease-out; 
    transition-delay: 0; 
} 

有什麼缺點?由於它不會影響不會改變背景顏色的元素,我唯一想到的問題是它會對瀏覽器產生一些影響。

可以用太多的過渡導致瀏覽器是laggy?還是有什麼特殊情況下我應該禁用所有轉換?

回答

6

轉換將是昂貴的,當動畫實際發生,肯定,但我認爲還有超出收效甚微。

通用選擇不慢,因爲大多數人做出來是。對那些永遠不會使用這些風格的元素應用樣式是一種浪費,但這種浪費並不能彌補。也就是說,最好是是特定的,您希望將哪些元素應用到過渡,但在這種情況下,我認爲應用全局過渡聽起來不錯,如果您可以證明這一點。

我認爲你只需要注意不要將變更轉換爲太多元素的屬性。例如,對於您的情況,請記住,:hover狀態適用於元素及其所有祖先(無論如何,在具有明確定義的:hover行爲的桌面瀏覽器中)。現代瀏覽器帶有硬件加速功能(IE9 +非常適合,全部爲)。再加上現代硬件,至少在臺式機和筆記本電腦上幾乎沒有任何明顯的性能衝擊。移動硬件(智能手機和平板電腦)可能會更有限,但如果您使用自適應設計,則可以通過切換@media輕鬆關閉轉場。

這些只是我的兩美分。我還沒有太大的轉變發揮自己,但總結:在應用過渡時,我寧願是特定的,但它不會傷害只要普遍應用它們你知道你在做什麼

當然,你總是能夠通過與您使用任何選擇一個新的規則,並給予它transition-property: none禁用某些元素的轉變。

0

運行自動化測試時,你需要禁用所有過渡。禁用轉換將通過停止使用BrowserDriver.wait()來幫助您。並且運​​行速度會更快!