html - 具有长时间问题的 CSS 过渡宽度/位置

Question

假设我们想要宽度/位置的过渡

当使用较长的持续时间时，会出现不良行为，因为计时功能将从零开始以执行其余操作

    #test {
      border: solid 1px;
      width: 100px;
      height: 50px;
      transition: width 10s linear;
    }
    #test:hover {
      width: 1000px;
      transition: width 10s linear;
    }

<div id="test"></div>

当在过渡期间将 div 重新悬停在任何地方时说在中间它会在 10s 上进行过渡但是对于 500px 不是原始设置，更糟糕的是它会最后 10 像素需要 10 秒。

是否有解决方法或者我应该使用 jQuery animate 函数？

Answer 1

如果您不介意编写动画脚本，这里有一个解决方案。 本质上，您必须知道剩余的时间来覆盖剩余的宽度。

当然，您可以将此函数用于任何元素，也可以传入所需的宽度，但这不在本范围内。

$("#test").on("mouseover", function(){
  var $el = $(this);  
  var time = 10000 - $el.width()*10; // This is the actual remaining animation time

  $el.stop().animate({"width": "1000px"}, time, "linear");
});

$("#test").on("mouseout", function(){
  var $el = $(this);
  var time = $el.width()*10; // This is the actual remaining animation time
  
  $el.stop().animate({"width": "100px"}, time, "linear");
});

#test {
  border: solid 1px;
  width: 100px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="test"></div>