答案：通过CSS transition和JavaScript类切换实现侧边栏展开收起动画。首先构建包含按钮、侧边栏和主内容区的HTML结构；接着用CSS设置.sidebar默认宽度200px并添加transition过渡效果，定义.collapsed类将宽度缩至60px或使用transform: translateX(-140px)优化性能；JavaScript为按钮绑定点击事件，切换.collapsed类触发动画；同时通过overflow: hidden隐藏溢出内容，并调整收起状态下的文字显示。最终实现流畅的侧边栏展开收起交互，适合初学者掌握CSS动画与DOM操作结合的基本模式。
实现一个带有展开收起动画的侧边栏，是CSS初级项目中非常实用的功能。关键在于使用CSS的transition属性控制宽度或transform的变化，结合JavaScript切换类名来触发动画效果。
1. 基本HTML结构
先构建一个简单的布局：包含一个可点击的按钮和一个侧边栏容器。
主内容区
2. CSS样式与动画
使用width配合transition实现平滑展开和收起。默认侧边栏收起，通过添加类控制展开状态。
.sidebar {
width: 200px;
height: 100vh;
background: #333;
color: white;
position: fixed;
top: 0;
left: 0;
transition: width 0.3s ease;
overflow: hidden;
}
/ 收起状态 /
.sidebar.collapsed {
width: 60px;
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar li {
padding: 15px 20px;
text-align: center;
font-size: 14px;
}
/ 展开时显示文字，收起时隐藏 /
.sidebar.collapsed li {
font-size: 12px;
padding: 15px 10px;
}
3. JavaScript控制切换
用JavaScript为按钮绑定点击事件，切换collapsed类。
立即学习“前端免费学习笔记（深入）”；
document.getElementById("toggleBtn").addEventListener("click", function () {
document.querySelector(".sidebar").classList.toggle("collapsed");
});
4. 可选优化：使用transform提升性能
如果想进一步优化动画流畅度，可以用transform: translateX()代替改变width，避免重排。
.sidebar {
transform: translateX(0);
transition: transform 0.3s ease;
}
.sidebar.collapsed {
transform: translateX(-140px); / 200 - 60 /
}
此时侧边栏视觉上“缩进”，实际仍占据原始空间，适合配合主内容区域联动移动。
基本上就这些。核心就是transition + 类切换，简单有效，适合初学者理解和扩展。可以在此基础上加入图标、响应式适配等增强体验。不复杂但容易忽略细节，比如overflow: hidden防止内容溢出，或者文字在收起时自动隐藏。基本上照着做就能跑起来。
