更改HTML元素'；JavaScript中的s样式及其CSS转换暂时禁用是'；功能不可靠

目前，我正在为一个网站制作一个动画，涉及两个元素，它们的位置在一段时间内发生变化，通常会重置为初始位置。一次只能看到一个元素，一切都应该尽可能顺利地运行

在您询问之前，仅CSS解决方案是不可能的，因为它是动态生成的，并且必须同步。为了回答这个问题，我将使用一个非常简化的版本，它只包含一个向右移动的方框。我将只提到后一个例子，除非在问题的其余部分明确说明，以保持简单

无论如何，移动由正在设置的CSS transition属性处理，以便浏览器可以为此执行繁重的操作。然后必须取消此转换，以便在瞬间重置元件的位置。这样做的明显方式是这样做，然后在需要再次移动时重新应用transition，这也是立即进行的。然而，这是行不通的。不完全是。我会解释的

看看这个问题末尾或链接的JSFIDLE中的JavaScript，您可以看到这就是我正在做的，但是setTimeout在这两者之间增加了25毫秒的延迟。这样做的原因是（你最好自己尝试一下）如果没有延迟（这是我想要的）或者延迟很短，元素会间歇性地或持续地保持在原位，这不是期望的效果。延迟越高，工作的可能性就越大，尽管在我的实际动画中，这会导致轻微的抖动，因为动画分为两部分工作，并且没有设计为具有延迟

这看起来确实像是一个浏览器错误，但我已经在Chrome、Firefox 52和当前版本的Firefox上进行了测试，结果都很相似。我不确定从这里走到哪里，因为我无法在任何地方找到报告的此问题或任何解决方案/解决方法。如果有人能找到一种方法使其按预期可靠工作，我们将不胜感激。：）

---

标记和代码也粘贴在此处：

var-box=document.getElementById（“box”）；
//减小该值或将其设置为0（I
//想要完全消除超时）
//它只能正常工作
//断断续续地。
var延迟=25；
setInterval（函数（）{
box.style.transition=“无”；
box.style.left=“1em”；
setTimeout（函数（）{
box.style.transition=“1s线性”；
box.style.left=“11em”；
}，延误）；
}, 1000);
#框{
宽度：5em；
身高：5公分；
背景色：青色；
位置：绝对位置；
顶部：1米；
左：1米；
}
强制DOM在重置后设置新转换之前重新计算自身。这可以通过读取框的偏移量来实现，例如：


var-box=document.getElementById（“box”）；
setInterval（函数（）{
box.style.transition=“无”；
box.style.left=“1em”；
设x=box.offsetLeft；//读取定位值会强制DOM在更改后重新计算所有位置
box.style.transition=“1s线性”；
box.style.left=“11em”；
}, 1000);
正文{
背景色：rgba（0,0,0,0）；
}
#盒子{
宽度：5em；
身高：5公分；
背景色：青色；
位置：绝对位置；
顶部：1米；
左：1米；
}
使用
animation
，而不是将
转换作为动画，它将做得更好，最重要的是性能方面，而且不需要计时器来观看

通过
动画
事件，可以以任何合适的方式同步动画，包括启动计时器以重新启动或更改动画

或者使用CSS设置某些部件


var-box=document.getElementById（“box”）；
box.style.left=“11em”//开始
box.addEventListener（“动画结束”，动画结束，false）；
函数动画结束（e）{
如果（e.type=='animationend'）{
this.style.left=“1em”；
}
}
#框{
宽度：5em；
身高：5公分；
背景色：青色；
位置：绝对位置；
顶部：1米；
左：1米；
动画：移动1s线性4；
}
@关键帧使我移动{
0%{左：1em；}
}
它看起来确实更好。@Teemu这是一个什么CSS唯一的解决方案。。。这种风格是以颜色为主的script@Teemu我更新了我的答案，使其更加清晰。我的代码片段没有重画，它只是计算。此外，转换的元素不在文本流中，重新计算位置对于浏览器来说是一项轻量级任务，并且在脚本执行后呈现页面。@gif这一切都很好：）这个简单的解决方案似乎非常有效。感谢您编辑您的答案，以添加一个解释，为什么它的工作！