如何实现侧边栏切换时content区域平滑左推而非覆盖的效果？

没问题！我来帮你实现这个平滑推送过渡的效果——让侧边栏从右侧滑入的同时，内容区跟着向左移动（移动距离刚好等于侧边栏宽度），而不是侧边栏直接覆盖内容。下面是具体的修改方案：

核心思路 #

我们需要同步两个动画：侧边栏的滑入，以及内容区的左移，两者使用相同的过渡时长，保证动画流畅同步。同时保留你原来的侧边栏图标始终可见的特性。

1. CSS 部分修改 #

主要给内容区添加过渡效果，并定义它在侧边栏打开时的位移状态，同时修正一些小语法问题：

#side { 
  position:absolute; 
  right:100%; 
  width: 50px; 
  height: 50px; 
  z-index: 1000000; 
  color:black; 
  background: #fff; /* 给图标加个白色背景，方便点击识别 */
  cursor: pointer;
} 
#slidable { 
  position: fixed; 
  top:0; 
  height: 100vh; 
  background: black; 
  width: 200px; 
  left: 100%; 
  transition: left 0.4s ease; /* 明确过渡属性，动画更可控 */
  z-index: 999999; /* 比内容区高，但图标已经在侧边栏外，不影响点击 */
  color:white; 
  text-align:center; 
  font-size:25px; 
  font-weight: 300; 
} 
#slidable.open{ 
  left: calc(100% - 200px); 
} 
/* 给内容区加过渡，初始位置正常 */
#content {
  position: relative;
  transition: transform 0.4s ease; /* 用transform做位移，比left更流畅，避免浏览器重排 */
  padding: 20px; /* 加个内边距，内容不会贴边 */
}
/* 侧边栏打开时，内容区向左移动200px（和侧边栏宽度一致） */
#content.shifted {
  transform: translateX(-200px);
}
.fa { 
  font-size:30px !important; /* 修正原代码的语法错误：少了分号 */
  margin-top:10px; /* 微调图标位置，让它在按钮里居中 */
  color:black; 
}

2. jQuery 部分修改 #

需要在切换侧边栏类的同时，给内容区也切换一个位移类，实现同步动画：

jQuery(function($) { 
  $("#side").click(function() { 
    $('#slidable').toggleClass("open"); 
    $('#content').toggleClass("shifted"); // 新增这一行：同步切换内容区的位移状态
  }); 
})

3. 完整可运行代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="slidable">
  <div id="side" class="icon">
    <i class="fa fa-bars"></i>
  </div>
  <div>
    <p>Link 1</p>
    <p>Link 2</p>
    <p>Link 3</p>
    <p>Link 4</p>
    <p>Link 5</p>
  </div>
</div>
<div id="content">
  <p>hallo</p>
  <p>可以多加点内容，这样推送效果会更明显哦～</p>
</div>

关键修改说明 #

• 流畅动画：用transform: translateX()移动内容区，比修改left属性性能更好，动画更丝滑，不会出现卡顿。
• 同步过渡：侧边栏和内容区都用0.4s ease的过渡时长，保证两者动画完全同步。
• 保留图标可见性：你原来的#side设置right:100%的逻辑完全正确，图标始终在侧边栏左侧外部，不管侧边栏是否打开都能点击。
• 语法修正：修复了原CSS中font-size:30px!的错误，改为正确的font-size:30px !important;。

这样修改后，点击图标时，侧边栏会平滑滑入，内容区也会跟着向左移动刚好200px，完美实现你想要的推送过渡效果！

内容的提问来源于stack exchange，提问作者user8139445