CSS恒定过渡速度[重复]

Question

我正在努力实现恒定的过渡速度。

注意，我不是指“轻松”和“线性”之间的区别。我的意思是如果我们从 0px 到 20px 需要 1 秒，但从 0 到 100px 应该需要 10 秒。

.box {
    width: 0px;
    height: 20px;
    transition: width 1s linear;
}

似乎找不到方法来做到这一点。而我所有的搜索都只是出现了轻松/线性差异。

.

Answer 1

我发现最好的方法是使用自定义属性。在下面的示例中，我使用20 来表示一个宽度单位。当乘以.05 时，我们得到1，即一秒。使用自定义属性，我们可以将transition-width 变量覆盖为所需的像素长度。计算将动态更新并相应调整transition-duration。

setTimeout(() => {
  document.querySelector('.box.one').classList.add('start');
  document.querySelector('.box.two').classList.add('start');
}, 0);

.box {
  --transition-width: 20;
  --transition-speed: .05;
  width: 0px;
  overflow: hidden;
  height: 20px;
  transition-property: width;
  transition-timing-function: linear;
  transition-duration: calc(var(--transition-width) * var(--transition-speed) * 1s);
  background: black;
}

.box.one.start {
  width: 20px;
}

.box.two.start {
  --transition-width: 100;
  width: 100px;
}

<div class="box one"></div>
<div class="box two"></div>

jsFiddle