CSS 恒定过渡速度

Question

我正在尝试实现恒定的转换速度。

注意，我指的不是 "ease" 和 "linear" 之间的区别。我的意思是如果我们从 0px 到 20px 需要 1 秒，但是从 0 到 100px 应该需要 10 秒。

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

似乎找不到执行此操作的方法。我所有的搜索都出现了 ease/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 恒定过渡速度

CSS Constant Transition Speed

css

transition

css-transitions

css-transforms