Javascript 当两个元素同时使用变换来移动时，中间为什么会有间隙？

这是我的bug演示：

这是一个浏览器错误吗

我通过将

transform:translateX（100%）

替换为

left:100%

---

但是，使用“左”更改位置的性能远低于“变换”。如果坚持使用transform，有没有办法解决这个差距问题？

解决这个错误的方法可能会稍微改变div1的移动

将定时函数与标准的ease值偏移一小段，我们将其调整为更接近div2

我已将转换设置得较慢，以便更容易看到它是否失败

setTimeout（函数（）{
document.querySelector（'.demo1'）.classList.add（'right'）；
document.querySelector（'.demo2'）.classList.add（'right'）；
});
正文{
背景：绿色；
}
.包装纸{
位置：相对位置；
宽度：100px；
}
.demo1、.demo2{
位置：绝对位置；
宽度：100%；
高度：100px；
背景：ddd；
过渡期：4s；
}
.demo1{
变换：translateX（0）；
过渡计时功能：立方贝塞尔（.23,0.12,25,1.05）；
}
D.演示2{
转化：translateX（100%）；
}
.1.对{
转换：translateX（100%）
}
.2.对{
转化：translateX（200%）；
}

我在演示中看不到任何问题…@vals你可以看到我的bug img，bug只在我的PC和firefox中有两个元素移动时出现，一切都正常ok@vals我在chrome上发现了这个bug…我只是在edge上测试了一下，edge还可以，所以它是chrome的bug？是的，它是chrome的bug。我发现很难让它消失，尽管谢谢你的回答，但我已经找到了修复它的方法，我移动了父元素“wrapper”，因此没有间隙。。