【问题标题】:Microsoft Edge hover bugMicrosoft Edge 悬停错误
【发布时间】:2018-01-15 01:31:23
【问题描述】:

我在 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>

【问题讨论】:

    标签: html css hover transition microsoft-edge


    【解决方案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 上的过渡是平滑的

    【讨论】:

    • 至少在 IE11 中,当您尝试重现 OP 的问题时,该属性会导致转换变慢。
    • 是的(在所有浏览器上),正如我所说,它会减慢动画的开始和结束速度。
    • 感谢您澄清您的回答。当我发表评论时,该解释不存在。
    • 很高兴帮助 Vesmy!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-06
    相关资源
    最近更新 更多