微软Edge浏览器悬停bug

Question

我在Microsoft Edge中遇到了一个问题。当鼠标悬停在<div>上时，它会执行transform: scale(1.5);和transition: transform 1s;。但是，如果您将光标移动到div上，等待1秒钟，然后快速移出并再次快速移回div，则div的缩放会破裂，转换效果会消失。是否有任何方法可以解决此问题？这里是fiddle。

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

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

<div></div>

- Vesmy

Answer 1

要解决Edge上的过渡问题，请使用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>

编辑：如果您仔细观察，会注意到悬停时宽度发生了某种故障，但总体而言，转换在Edge上很顺畅

- Ivan

---

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

是的，它在所有浏览器上都会减速动画的开始和结束。就像我说的那样。 - Ivan

谢谢您澄清您的答案。当我发表评论时，那个解释还没有出现。 - freginold

很高兴能帮助Vesmy！ - Ivan