持续时间较长的 CSS 过渡宽度/位置问题

Posted 2023-05-08

【中文标题】持续时间较长的 CSS 过渡宽度/位置问题

【英文标题】：CSS transition width/position with long duration issue

【发布时间】：2015-08-27 10:03:10

【问题描述】：

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

当使用较长的持续时间时，会出现不希望的行为，因为在其余操作中计时函数将从零开始

    #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 函数？

【问题讨论】：

我没看到问题。

@AndreaLigios 问题是，如果你重新悬停<div>，当它的宽度为600px（而不是最初的100px）时，新的过渡将再次需要10秒，但仅适用于400px因此，过渡似乎较慢。我相信 OP 想要的是在过渡时保持稳定的速度，无论发生的时间如何。

@TasosK。好的，但这并没有发生在我身上！你用的是哪种浏览器？？编辑：好的，我已经使用 Chrome 复制了它。如前所述，它在 Firefox 上不是这样的

@AndreaLigios 你是对的。它在 Firefox 和 Chrome 中的工作方式不同。我猜在 Firefox 中它可以按照 OP 的要求工作

Firefox、IE 和 Safari 按我的意愿工作，问题似乎只在 Chrome 中，我想我会保持原样，直到 Chrome 像其他人一样做 谢谢大家

【参考方案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>

【讨论】：

是的，可以完美运行，但是正如您在 cmets 中看到的那样，除了 Chrome 之外，纯 CSS 也可以正常工作，此外，我以宽度为例，但我实际上愿意做的是动画一个背景位置，但正如 link 所说，它不太支持跨平台，将来可能不会支持

我明白了。我想我想提供一个临时解决方案，直到您可以得到更好的东西或让 Chrome 实现它。但是，它并不完全适用于您的用例。祝你好运！