持续时间较长的 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>