Question

我正在努力保持恒定的过渡速度。

注意，我不是说“轻松”和“线性”之间的区别。我的意思是，如果我们从0px变为20px，则需要1秒钟，但从0px变为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

CSS恒定过渡速度

1 个答案: