使用 position: fixed 固定侧边栏位置：

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: #333;
  color: white;
  transition: transform 0.3s ease;
}

主内容区域需要避开侧边栏：

.content {
  margin-left: 250px;
  padding: 20px;
}

2. 使用 Transform 实现位移折叠

折叠的本质是将侧边栏从可视区域“移出”。通过 transform: translateX() 控制其水平位移。

• 展开状态：translateX(0)
• 折叠状态：translateX(-250px) —— 完全移出屏幕左侧

添加一个折叠类来控制状态：

.sidebar.collapsed {
  transform: translateX(-250px);
}

这样只需通过 J*aScript 切换类名即可触发视觉变化。

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。 为创作者提供AI赋能

3. 添加过渡动画（Transition）

transition 属性让 transform 的变化变得平滑：

.sidebar {
  transition: transform 0.3s ease;
}

ease 表示先快后慢的缓动效果，适合抽屉式动画。也可尝试 cubic-bezier(0.4, 0, 0.2, 1) 获得更自然的弹跳感。

4. 交互逻辑（J*aScript 控制类切换）

用 J*aScript 监听按钮点击，切换 collapsed 类：

document.getElementById('toggle').addEventListener('click', function() {
  document.querySelector('.sidebar').classList.toggle('collapsed');
});

点击后，CSS 自动执行 transform 动画，实现滑入滑出效果。

5. 响应式优化建议

• 在小屏幕上默认折叠侧边栏，使用媒体查询调整初始状态
• 可配合遮罩层（overlay）提升移动端体验
• 注意 z-index，确保侧边栏不会被其他元素覆盖

基本上就这些。利用 position 定位、transform 位移和 transition 过渡，就能实现流畅的侧边栏折叠动画。关键是理解 transform 不影响布局，性能优于修改 margin 或 left，适合做动画。不复杂但容易忽略细节。