如何使所有值的过渡持续时间相同？答案

【问题标题】：How to make transition duration to be the same for all values?如何使所有值的过渡持续时间相同？
【发布时间】：2020-08-30 11:55:12
【问题描述】：

我们有两个相似的宽度过渡，它们在中间被打断，并且它们的最终过渡值发生了变化。它们之间的唯一区别是绿色框最终宽度与起始宽度完全相同，橙色框最终宽度与起始宽度不同。

这会导致绿框过渡更快，就好像它只是“撤消”初始过渡。

Link to a full demo

html:

<div id="reference"></div>
<div id="boxA" ></div>
<div id="boxB" ></div>

css:

#reference {
  width: 100px;
  height: 100px;
  background-color: rgba(0, 204, 255, 0.5);
}

#boxA {
  background-color: rgba(166, 255, 0, 0.5);
  height: 100px;
  transition: width 1s linear;
}

#boxB {
  background-color: rgba(255, 136, 0, 0.5);
  height: 100px;
  transition: width 1s linear;
}

javascript:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

document.getElementById("boxA").style.width = "100px";
document.getElementById("boxB").style.width = "100px";

(async () => {
await sleep(1000)

document.getElementById("boxA").style.width = "200px";
document.getElementById("boxB").style.width = "200px";

await sleep(500)

document.getElementById("boxA").style.width = "100px";
document.getElementById("boxB").style.width = "101px";

})()

当目标值更改时，在初始转换完成之前，使所有值的转换持续时间相同的最简单方法是什么？
起始值是唯一的特例吗？
在哪里可以找到这种奇怪行为的文档？

【问题讨论】：

boxA 和 boxB 的转换速度 (1s) 相同。由于boxB 在相同经过的时间里移动的距离更短，它需要比boxA 移动得慢
@dillon 两个盒子都展开到相同的宽度，绿色盒子的收缩时间为 0.5，橙色盒子的收缩时间为 1s
嗯，是的，这确实是一种奇怪的行为，但看起来你在宽度上同时发生了多个转换，因为你没有等待它完成..也许这对你有帮助stackoverflow.com/questions/16376109/cut-a-css-transition-short ?

标签： javascript html css animation css-transitions

【解决方案1】：

规范在这里：我会检查 §3.4.4 https://www.w3.org/TR/css-transitions-1/#starting

否则，实现必须取消正在运行的转换并开始一个新的转换，其：

...

倒车调整起始值与起始值相同，且

因此，如果您返回到原始值，那么它是相同的转换，但如果转到一个新值，它会从当前值开始一个新的转换。

所以绕过这个的一种方法是传递一个中间值，只是为了触发一个新的转换：

// go to any value (that is not the current value or the original value)
document.getElementById("boxA").style.width = "999px"; 

// Trigger reflow  (See @Kaiido's comment below)
 document.body.offsetWidth;

// and then immediately go back to the original value
document.getElementById("boxA").style.width = "100px";

现在两个框将有两个具有相同持续时间的过渡，但一个将以 100 像素结束，另一个以 101 像素结束。

我也认为解释的理由是相关的：§3.1 Faster reversing of interrupted transitions

【讨论】：

您需要在设置假值后触发回流（例如document.getElementById("boxA").style.width = "999px"; document.body.offsetWidth; document.getElementById("boxA").style.width = "100px"; 参见your current code，vs fixed one
@Kaiido 嗯，你是。我发誓我在上面的 jsfiddle 中尝试过，并认为它有效，但现在再次确认，我发现你是对的。

【解决方案2】：

这不是一个完美的答案，因为我无法告诉您每个不同元素的正确值，但它有效：

box1 = document.getElementById("boxA");
box2 = document.getElementById("boxB");

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

box1.style.width = "100px";
box2.style.width = "100px";

(async() => {
  await sleep(1000)

  box1.style.width = "200px";
  box2.style.width = "200px";

  await sleep(500)

  box1.style.width = "100px";
  box2.style.transitionDuration = "0.5s";
  box2.style.width = "101px";

})()

#reference {
  width: 100px;
  height: 100px;
  background-color: rgba(0, 204, 255, 0.5);
}

#boxA {
  background-color: rgba(166, 255, 0, 0.5);
  height: 100px;
  transition: width 1s linear;
}

#boxB {
  background-color: rgba(255, 136, 0, 0.5);
  height: 100px;
  transition: width 1s linear;
}

<div id="reference"></div>
<div id="boxA"></div>
<div id="boxB"></div>

解释：两个box元素都增加到200px，之后，第一个框回到100px，而第二个box元素减少了@987654328 @。由于它必须覆盖比第一个框更小的距离，它的transition duration 也必须减少。

【讨论】：