Javascript 如何使用百分比使CSS转换更加平滑？

我想有一个主页和侧菜单，其宽度是0在第一。主页的宽度为100%，由一个按钮组成。单击按钮时，侧菜单的宽度将增加到50%，主页的右边距将增加到50%。我使用了CSS转换和一些JavaScript代码，但它不能顺利工作。你有什么建议

我不想用“px”代替百分比

以下是一个例子：

函数openRightSide（）{
leftSide.style.marginRight=“50%”；
rightSide.style.width=“50%”；
}
函数closeLeftSide（）{
leftSide.style.marginRight=“0”；
rightSide.style.width=“0”；
}

.main容器{
宽度：100%；
高度：100px；
显示器：flex；
弯曲方向：行；
位置：相对位置；
}
.左侧集装箱{
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
右边距：0；
背景色：#7f7f7f；
过渡：边缘0.9s；
}
.右侧集装箱{
宽度：0；
身高：100%；
位置：固定；
右：0；
排名：0；
z指数：2；
背景色：#F4；
溢出：隐藏；
过渡：宽度0.9s；
}

显示右侧
&时代；

边距是过渡过程中的一项繁重操作，最好使用

transform:translateX（50%）

以获得更平滑的过渡

使用边距转换时，dom需要检查所有元素相对于正在设置动画的元素的位置。变换独立于其他元素更改元素

---

这也适用于宽度。使用

变换：缩放（0）

顺利？？？工作顺利！你所说的“流畅”是什么意思？它已经平滑过渡了你可以尝试使用CSS类来表示扩展的状态，而不是内联样式，但我怀疑这会使它比现在更平滑。你的意思是你希望它不那么线性（在结束时减速，而不是突然停止？）你需要在transition属性上使用，例如

transition:width 0.9s ease in out

。但这会将页面右侧宽度的50%转换出去！你应该根据自己的喜好改变<代码>转换：translateX（-50%）将其置于左侧。重要的一点是，边距变换很慢，变换变换可以实现快速变换。