答案：通过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结构
先构建一个简单的布局：包含一个可点击的按钮和一个侧边栏容器。
<div class="sidebar"> <ul> <li>首页</li> <li>订单</li> <li>设置</li> </ul> </div> <button id="toggleBtn">☰ 菜单</button> <div class="content"> <h2>主内容区</h2> </div>
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; } <p>/<em> 收起状态 </em>/ .sidebar.collapsed { width: 60px; }</p><p>.sidebar ul { list-style: none; padding: 0; margin: 0; }</p><p>.sidebar li { padding: 15px 20px; text-align: center; font-size: 14px; }</p><p>/<em> 展开时显示文字，收起时隐藏 </em>/ .sidebar.collapsed li { font-size: 12px; padding: 15px 10px; }</p>
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; } <p>.sidebar.collapsed { transform: translateX(-140px); /<em> 200 - 60 </em>/ }</p>
此时侧边栏视觉上“缩进”，实际仍占据原始空间，适合配合主内容区域联动移动。
基本上就这些。核心就是transition + 类切换，简单有效，适合初学者理解和扩展。可以在此基础上加入图标、响应式适配等增强体验。不复杂但容易忽略细节，比如overflow: hidden防止内容溢出，或者文字在收起时自动隐藏。基本上照着做就能跑起来。