CSS恒定转换速度

Question

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

注意，我指的不是"轻松"one_answers"线性"之间的区别。我的意思是，如果我们从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