css初级项目侧边栏展开收起动画-css教程-PHP中文网

css初级项目侧边栏展开收起动画

P粉602998670

发布： 2025-10-21 18:19:01

原创

470人浏览过

答案：通过CSS transition和JavaScript类切换实现侧边栏展开收起动画。首先构建包含按钮、侧边栏和主内容区的HTML结构；接着用CSS设置.sidebar默认宽度200px并添加transition过渡效果，定义.collapsed类将宽度缩至60px或使用transform: translateX(-140px)优化性能；JavaScript为按钮绑定点击事件，切换.collapsed类触发动画；同时通过overflow: hidden隐藏溢出内容，并调整收起状态下的文字显示。最终实现流畅的侧边栏展开收起交互，适合初学者掌握CSS动画与DOM操作结合的基本模式。

css初级项目侧边栏展开收起动画

实现一个带有展开收起动画的侧边栏，是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类。

立即学习“前端免费学习笔记（深入）”；

万兴爱画

万兴爱画AI绘画生成工具

查看详情

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防止内容溢出，或者文字在收起时自动隐藏。基本上照着做就能跑起来。

以上就是css初级项目侧边栏展开收起动画的详细内容，更多请关注php中文网其它相关文章！