2017-02-15 88 views
3

我注意到了MS Edge中CSS過渡的一個奇怪問題。MS邊緣CSS過渡閃爍

基本上,如果您有一個過渡,例如在懸停狀態之間,但爲這些懸停狀態定義的樣式會覆蓋CSS級聯,Edge會在轉換期間切換到覆蓋樣式,然後切換回來。

問題描述得相當好這裏太: https://www.webmasterworld.com/css/4791912.htm

我還創建了一個筆演示問題: http://codepen.io/powerbored/pen/OWqXRw

a { 
    transition: all 2s ease-in; 
    color: orange; 
} 

a div { 
    color: lightblue; 
    // displays in light blue in all browsers except during transitions in Edge 
} 

a:hover { 
    color: red; 
} 

我知道Edge是不完全是一個偉大的瀏覽器,但我我真正想看到的是對這裏實際發生的事情以及爲什麼會發生的解釋。

+0

「我知道Edge不是一個很棒的瀏覽器」[有很多不是很棒的瀏覽器。](http://stackoverflow.com/questions/22457222/ie10-11-uses-transition-webkit -transform/22457802#22457802) – BoltClock

+0

在很多方面,Edge是一個非常棒的瀏覽器。這些方法往往首先限於有Windows 10的人開始... – TylerH

+0

@TylerH,任何示例?我想要喜歡Edge,但它一直讓我失望。 –

回答

5

有一些關於transition-property: all這是導致後代元素在過渡期間繼承動畫值,而不是無限期地保留其指定值在Microsoft Edge中。這似乎是特定於Microsoft Edge的CSS轉換的實現,即使Internet Explorer行爲正常,並且它只發生在transition-propertyall時 - 如果您只指定需要轉換的屬性,Microsoft Edge的行爲正確。

這就是我所能告訴你的。那麼,這是明顯的事實,這是不正確的行爲。

+0

感謝您的回覆,是的,指定轉換屬性是我的解決方案,因爲無論如何'transition-property:all'都是非常非常重要的。 發現這種行爲就是這樣一個'跆拳道...'的時刻,我很好奇看到別人的想法。 –