如何实现侧边栏线性平滑折叠展开，避免出现垂直错位问题

问题根因 #

这种毫秒级错位、logo溢出到主体内容的问题，基本是3个原因导致的：

• 侧边栏宽度过渡过程中，内部元素没有提前做溢出裁剪，重排触发垂直方向位移
• 折叠/展开时只给宽度加了过渡，没同步处理内部元素的透明度、位移过渡时序
• logo元素的z-index层级高于主体内容，且未做超出侧边栏范围的隐藏

修复方案 #

1. 统一侧边栏基础样式规则 #

首先给侧边栏容器加固定的基础配置，避免盒模型计算偏差：

.sidebar {
  box-sizing: border-box;
  position: relative;
  overflow: hidden; /* 核心：所有超出侧边栏范围的内容直接裁剪，不会溢出到主体区 */
  flex-shrink: 0; /* flex布局下禁止侧边栏被挤压 */
  transition: width 0.3s linear; /* 线性过渡，时长可自行调整 */
  width: var(--sidebar-width, 240px); /* 用CSS变量控制宽度，折叠时修改参数即可 */
}
/* 侧边栏内部所有元素统一盒模型规则 */
.sidebar * {
  box-sizing: border-box;
}

2. 同步控制内部元素的过渡时序，避免重排错位 #

不要让内部元素在侧边栏未完成宽度变化时就显示/隐藏，对齐过渡时间线：

/* 侧边栏折叠状态 */
.sidebar.collapsed {
  --sidebar-width: 60px;
}
/* 侧边栏文字类内容（含logo文字、菜单文字）统一加过渡 */
.sidebar .sidebar-text {
  opacity: 1;
  /* 展开时等宽度变到一半再显示，折叠时先隐藏文字再变宽度 */
  transition: opacity 0.15s linear 0.15s;
  white-space: nowrap; /* 禁止文字换行，避免垂直方向撑高容器 */
}
.sidebar.collapsed .sidebar-text {
  opacity: 0;
  transition-delay: 0s;
  pointer-events: none;
}

3. 修复logo溢出问题 #

给logo容器加超出隐藏，限制层级：

.sidebar .logo-wrapper {
  overflow: hidden;
  height: 替换为你的logo固定高度; /* 固定高度，避免文字隐藏/显示时高度变化导致垂直位移 */
  display: flex;
  align-items: center;
}
.sidebar .logo-text {
  z-index: 1; /* 不要高于主体内容的z-index，主体内容一般设z-index: 2即可 */
}

4. 避免布局抖动的额外优化 #

如果还有细微的垂直位移，可以给侧边栏所有菜单项也设置固定高度，不要用padding撑开高度，同时所有图标都用固定宽高的容器包裹，避免图标大小变化触发重排：

.sidebar .menu-item {
  height: 48px; /* 固定高度 */
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.sidebar .menu-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

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