javascript - 如何使用百分比让 CSS 过渡更平滑？

Question

我首先想要一个主页面和一个宽度为0的侧边菜单。主页的宽度为 100%，由一个按钮组成。单击该按钮时，侧边菜单的宽度将增加到 50%，而主页的 margin-right 将增加到 50%。我使用了 CSS 转换和一些 JavaScript 代码，但它们运行不流畅。你有什么建议？

我不想使用“px”而不是百分比。

例子如下:

function openRightSide() {
  leftSide.style.marginRight = "50%";
  rightSide.style.width = "50%";
}

function closeLeftSide() {
  leftSide.style.marginRight = "0";
  rightSide.style.width = "0";
}

.main-container {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  position: relative;
}

.left-side-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0;
  background-color: #7f7f7f;
  transition: margin 0.9s;
}

.right-side-container {
  width: 0;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2;
  background-color: #f4f4f4;
  overflow: hidden;
  transition: width 0.9s;
}

<div class="main-container" id="mainContainer">
  <div class="left-side-container" id="leftSide">
    <button onclick="openRightSide()">Show Right Side</button>
  </div>
  <div class="right-side-container" id="rightSide">
    <span class="close" onclick="closeLeftSide()">&times;</span>
  </div>
</div>

Answer 1

Margin 是过渡上的繁重操作，最好使用 transform: translateX(50%) 来获得更平滑的过渡。

对于边距过渡，dom 需要检查所有元素相对于您正在设置动画的元素的位置。 Transform 独立于其他元素改变元素。

这也适用于宽度。使用 transform: scale(0)。