Javascript 如何使所有值的转换持续时间相同？ 我们有两个相似的宽度跃迁，在中间被打断，它们的最终跃迁值发生变化。 它们之间唯一的区别是，绿色框的最终宽度与其起始宽度完全相同，而橙色框的最终宽度与其起始宽度不同

这会使绿盒转换更快，就好像它只是“撤消”初始转换一样

html:

javascript:

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

---

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

box1=document.getElementById（“boxA”）；
box2=document.getElementById（“boxB”）；
常量睡眠=（毫秒）=>新承诺（（解析）=>设置超时（解析，毫秒））
box1.style.width=“100px”；
box2.style.width=“100px”；
（异步（）=>{
等待睡眠（1000）
box1.style.width=“200px”；
box2.style.width=“200px”；
等待睡眠（500）
box1.style.width=“100px”；
box2.style.transitionDuration=“0.5s”；
box2.style.width=“101px”；
})（）

#参考{
宽度：100px；
高度：100px；
背景色：rgba（0，204，255，0.5）；
}
#博萨{
背景色：rgba（166,255,0,0.5）；
高度：100px；
过渡：宽度1s线性；
}
#箱B{
背景色：rgba（255,136,0,0.5）；
高度：100px；
过渡：宽度1s线性；
}

---

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

box1=document.getElementById（“boxA”）；
box2=document.getElementById（“boxB”）；
常量睡眠=（毫秒）=>新承诺（（解析）=>设置超时（解析，毫秒））
box1.style.width=“100px”；
box2.style.width=“100px”；
（异步（）=>{
等待睡眠（1000）
box1.style.width=“200px”；
box2.style.width=“200px”；
等待睡眠（500）
box1.style.width=“100px”；
box2.style.transitionDuration=“0.5s”；
box2.style.width=“101px”；
})（）

#参考{
宽度：100px；
高度：100px；
背景色：rgba（0，204，255，0.5）；
}
#博萨{
背景色：rgba（166,255,0,0.5）；
高度：100px；
过渡：宽度1s线性；
}
#箱B{
背景色：rgba（255,136,0,0.5）；
高度：100px；
过渡：宽度1s线性；
}

---

规范在这里：我要检查§3.4.4
否则，实现必须取消正在运行的转换并启动一个新的转换，其：
• 反转调整后的启动值与启动值相同，且
因此，如果您返回到原始值，则它是相同的转换，但如果转到新值，它将从当前值开始新的转换
因此，绕过这一点的一种方法是传入一个中间值，以触发一个新的转换：

// 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";

现在，两个盒子将有两个具有相同持续时间的过渡，但一个将在100px结束，另一个在101px结束

---

---

此外，我认为解释的基本原理是相关的：
规范在这里：我要检查§3.4.4
否则，实现必须取消正在运行的转换并启动一个新的转换，其：
• 反转调整后的启动值与启动值相同，且
因此，如果您返回到原始值，则它是相同的转换，但如果转到新值，它将从当前值开始新的转换
因此，绕过这一点的一种方法是传入一个中间值，以触发一个新的转换：

// 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";

现在，两个盒子将有两个具有相同持续时间的过渡，但一个将在100px结束，另一个在101px结束

---

---

我还认为解释的基本原理是相关的：
对于

boxA

和

boxB

来说，转换速度（1s）是相同的。由于在相同的运行时间内，

boxB

的行驶距离较短，它需要比boxA移动得慢，dillon两个盒子都扩展到相同的宽度，绿色盒子收缩需要0.5秒，橙色盒子收缩需要1秒是的，这确实是一种奇怪的行为，但似乎你在宽度上同时发生了多个转换，因为你没有等待它完成。。也许这会对您有所帮助？转换速度（1s）对于

boxA

和

boxB

都是相同的。由于在相同的运行时间内，

boxB

的行驶距离较短，它需要比boxA移动得慢，dillon两个盒子都扩展到相同的宽度，绿色盒子收缩需要0.5秒，橙色盒子收缩需要1秒是的，这确实是一种奇怪的行为，但似乎你在宽度上同时发生了多个转换，因为你没有等待它完成。。也许这会对您有所帮助？您需要在设置假值（例如

document.getElementById（“boxA”）.style.width=“999px”；document.body.offsetWidth；document.getElementById（“boxA”）.style.width=“100px”）后触发回流

see，vs@kaido-huh，没错。我发誓我在上面的jsfiddle中试用过，认为它有效，但现在再次确认我看到你是对的。在设置了伪值（例如

document.getElementById（“boxA”）.style.width=“999px”；document.body.offsetWidth；document.getElementById（“boxA”）后，需要触发回流.style.width=“100px”

see，vs@kaido-huh，你说得对。我发誓我在上面的JSFIDLE中试用过它，认为它有效，但现在我再次确认你是对的。

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";

})()

// 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";