Javascript 边缘平滑过渡？

我有一个侧边栏转换，在Firefox中运行良好，但第一次使用它时，动画在Edge中是“不稳定的”。它会滞后，然后在浏览器中快速显示出来。在第一次使用每页加载后，它的行为与Firefox中的一样平稳。我知道Edge在translate方面有问题，但在CSS代码中指定转换类型（translatex）对我来说没有任何帮助

var sidebar=document.getElementById（'sidebar'）；
var burger=document.getElementById（'BurgerID'）；
burger.addEventListener（'click'，function（）{
if（burger.classList.contains（'open'））{
burger.classList.remove（'open'）；
sidebar.style.transform='translateX（400%）'；
}否则{
burger.classList.add（'open'）；
sidebar.style.transform='translateX（300%）'；
sidebar.style.zIndex=998；
}
});
侧栏{
背景：rgba（255255,0.90）；
位置：固定；
转化：translateX（400%）；
过渡：所有。5s轻松；
-webkit过渡：全部。5s轻松；
-ms转换：translatex.5s易用；
顶部：0px；
底部：0px；
宽度：25%；
身高：100%；
}
很难说，因为您的代码示例没有运行，但您可以尝试添加
将更改：transform到您的边栏元素

CSS属性将向浏览器提示元素的预期更改方式。浏览器可能会在实际更改元素之前设置优化。这些类型的优化可以通过在实际需要之前做一些可能非常昂贵的工作来提高页面的响应能力

重要提示：为了解决现有的性能问题，将更改作为最后手段。它不应用于预测性能问题


Edge非常过时，而且它有翻译问题，它不会依赖于与您的代码有任何关系。你导入任何外部文件吗？如果你这样做了，他们会减慢它的速度，使它四处跳跃。如果没有，它只是边缘。我试着检查你的代码，发现你的代码有几个遗漏的东西，它甚至没有在任何浏览器中显示边栏。我建议您发布一个可以产生问题的工作示例代码。另外，请尝试通知我们，您当前使用的是哪个版本的MS Edge？它可以帮助我们在测试时检查Edge的特定版本的问题。