Microsoft Edge悬停错误

我在Microsoft Edge中有一个错误。 <div>在悬停期间有transform: scale(1.5);与transition: transform 1s;。但是当你将光标移动到div时，等待1s，移出然后快速移动到div，div的比例被打破，转换消失。有没有办法解决这个问题？这里是fiddle。Microsoft Edge悬停错误

div { 
 
    background-color: green; 
 
    transition: transform 1s; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
div:hover { 
 
    transform: scale(1.5); 
 
}

<div></div>

来源

2017-08-07 Vesmy

要解决的边缘使用transition-timing-function属性这一过渡的问题，这将通过影响超速使得它更慢的开始和结束时解决问题。然后，您可以设定动画的长度（以秒为单位）将其与transition-duration

div { 
 
    background-color: green; 
 
    transition: transform 1s; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
div:hover { 
 
    transform: scale(1.5); 
 
    transition-timing-function: ease-in-out; 
 
}

<div></div>

编辑对原始速度：如果你注意到细心有某种与宽度变化上的毛刺悬停，但整体上边缘的过渡是平滑的

来源

2017-08-07 17:07:18 Ivan

至少在IE11中，当您尝试重现OP的问题时，该属性会导致过渡变慢。 – freginold

是的，它确实（在所有浏览器上），正如我所说的，它会减慢动画的开始和结束速度。 – Ivan

感谢您澄清您的答案。当我评论时，那个解释并不存在。 – freginold

Microsoft Edge悬停错误

回答

相关问题