时间戳

首页 > 解决方案 > CSS 恒定转换速度

css - CSS 恒定转换速度

问题描述

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

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

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

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

.

标签： csscss-transitionstransitioncss-transforms

解决方案

我发现最好的方法是使用自定义属性。在下面的示例中，我使用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

推荐阅读