javascript中的Laggy转换

因此，我正在用HTML制作一个页面，并使用Javascript进行转换：

HTML:

---

当运行这些时，它们不是平滑的，它们看起来有点滞后。如何使它们更平滑？

尝试使用类向元素添加动画

---

但是，如果您试图创建一个侧栏，那么这种方法可能方向不正确。如果你想让它发生在悬停状态，你可以像

抱歉，我忘了添加

HTML

代码，请查看更新后的问题。根据更新后的HTML编辑答案，并添加到小提琴的链接。边距逐像素设置动画：不可能有子像素值。使用

translateX（）

可能是一个更好的主意，它的优点是可以将元素的渲染卸载到GPU。

<div id="sidebar" onmouseover="expand()" onmouseout="collapse()">

function expand() {
    document.getElementById("main-container").style.marginLeft= "160px";
    document.getElementById("main-container").style.transition = "all 0.2s";
}

function collapse() {
    document.getElementById("main-container").style.marginLeft= "60px";
    document.getElementById("main-container").style.transition = "all 0.2s";
}

<div id="sidebar" onmouseover="expand()" onmouseout="collapse()">

#sidebar {
  width: 350px;
  height: 100vh;
  background: red;
  transition: transform 0.2s linear;
}

#sidebar.expanded {
    transform: translateX(160px);
}

function expand() {
document.getElementById("sidebar").classList.add("expanded");
}

function collapse() {
document.getElementById("sidebar").classList.remove("expanded");

}