Microsoft Edge悬停错误

Question

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

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