css初级项目侧边栏展开收起动画_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-21

浏览次数：次

返回列表

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

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

实现一个带有展开收起动画的侧边栏，是CSS初级项目中非常实用的功能。关键在于使用CSS的transition属性控制宽度或transform的变化，结合J*aScript切换类名来触发动画效果。

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. J*aScript控制切换

用J*aScript为按钮绑定点击事件，切换collapsed类。

MarsCode

字节跳动旗下的免费AI编程工具

339 查看详情 MarsCode

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初级项目侧边栏展开收起动画的详细内容，更多请关注其它相关文章！