2017-02-15 89 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'都是非常非常重要的。 发现这种行为就是这样一个'跆拳道...'的时刻,我很好奇看到别人的想法。 –