使用jQuery实现侧边栏平滑过渡及内容容器同步左移的问题

我明白你现在的困扰——想通过点击按钮实现侧边栏平滑滑入滑出，同时让内容容器同步向左移动，但当前用show()/hide()和直接修改margin的方式都是瞬间变化，完全没有过渡效果对吧？

问题根源 #

你当前代码的问题出在两个地方：

• jQuery的show()/hide()本质是修改元素的display属性，而display的切换是无法通过CSS过渡（transition）实现平滑动画的，所以侧边栏会瞬间出现/消失。
• 直接修改margin-right时，你没有给内容容器添加过渡属性，所以容器的位置变化也是瞬间完成的。

解决方案：用CSS过渡+类切换实现平滑效果 #

我们可以通过CSS设置过渡动画，再用JS切换类名的方式来触发动画，这样就能实现你想要的平滑过渡效果。

1. 调整CSS样式，添加过渡基础

先给侧边栏和内容容器加上过渡属性，同时设置侧边栏的初始隐藏状态（用transform而非display:none，因为transform支持过渡）：

/* 侧边栏基础样式 */
#sidebar-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 205px;
  height: 100vh;
  background: #f5f5f5;
  /* 初始状态：完全移出可视区域右侧 */
  transform: translateX(100%);
  /* 添加过渡动画，0.3s是动画时长，ease是缓动曲线 */
  transition: transform 0.3s ease;
}

/* 内容容器基础样式 */
.content-wrapper {
  background: #fff;
  margin-left: 20px;
  margin-right: 0;
  /* 给margin-right添加过渡，和侧边栏动画时长保持一致 */
  transition: margin-right 0.3s ease;
}

/* 侧边栏展开的状态类 */
#sidebar-right.open {
  transform: translateX(0); /* 回到可视区域 */
}

/* 内容容器对应展开状态的类 */
.content-wrapper.shifted {
  margin-right: 205px; /* 留出侧边栏的宽度 */
}

2. 修改JS代码，用类切换代替直接操作样式

去掉show()/hide()，通过添加/移除类名来触发CSS过渡：

var rightSidebarOpen = false; 
$('#toggle-right-sidebar').click(function () {
  if(rightSidebarOpen) {
    // 收起侧边栏：移除展开类
    $('#sidebar-right').removeClass('open');
    $('.content-wrapper').removeClass('shifted');
  } else {
    // 展开侧边栏：添加展开类
    $('#sidebar-right').addClass('open');
    $('.content-wrapper').addClass('shifted');
  }
  rightSidebarOpen = !rightSidebarOpen;
});

额外小提示 #

• 用transform: translateX()控制侧边栏的显示隐藏，比修改width或margin性能更好，因为transform属于GPU加速属性，动画会更流畅。
• 如果需要侧边栏隐藏时完全不占用布局空间，可以额外结合opacity和延迟修改display，但上面的方案已经能满足大部分平滑过渡的需求了。

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