Microsoft Edge 悬停错误

Question

我在 Microsoft Edge 中有一个错误。悬停期间的<div> 具有transform: scale(1.5); 和transition: transform 1s;。但是当你将光标移动到div时，等待1s，移出然后快速移动到div，div的刻度被破坏，transition消失。有没有办法解决这种行为？这里是fiddle。

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

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

<div></div>

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 上的过渡是平滑的