如何通过css animation制作侧边栏展开收缩效果-css教程-PHP中文网

如何通过css animation制作侧边栏展开收缩效果

P粉602998670

发布： 2025-09-25 08:41:01

原创

396人浏览过

使用CSS transition控制侧边栏宽度变化实现展开收缩，通过JavaScript切换类名触发动画，transition比animation更适用于此类交互效果。

如何通过css animation制作侧边栏展开收缩效果

要实现侧边栏的展开和收缩效果，使用 CSS Animation 是一种简洁高效的方式。你可以通过控制侧边栏的宽度或使用 `transform` 配合 `overflow` 来实现平滑动画。下面是一个实用且易于理解的实现方法。

1. 基础 HTML 结构

首先定义一个包含按钮和侧边栏的基本结构：

<button id="toggleBtn">切换侧边栏</button>
<div class="sidebar">
  <ul>
    <li>首页</li>
    <li>设置</li>
    <li>帮助</li>
  </ul>
</div>

登录后复制

2. 样式与动画定义

使用 CSS 定义侧边栏默认隐藏，并通过类名触发展开动画：

.sidebar {
  width: 0;
  height: 100vh;
  background-color: #333;
  color: white;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  transition: width 0.3s ease;
}

.sidebar.open {
  width: 200px;
}

登录后复制

说明：这里没有用 @keyframes 而是使用了 transition，因为它更适合状态切换（展开/收起）。如果你坚持使用 animation，也可以这样写：

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

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

@keyframes slideIn {
  from { width: 0; }
  to { width: 200px; }
}
@keyframes slideOut {
  from { width: 200px; }
  to { width: 0; }
}

.sidebar.open {
  animation: slideIn 0.3s forwards;
}
.sidebar.close {
  animation: slideOut 0.3s forwards;
}

登录后复制

注意： 使用 animation 时需动态添加/移除类名，并处理结束后的状态（forwards 保持最终帧）。

3. JavaScript 控制开关

用简单脚本切换类名：

document.getElementById('toggleBtn').addEventListener('click', function() {
  document.querySelector('.sidebar').classList.toggle('open');
});
</font>

登录后复制

建议： 如果用 transition，逻辑更直观；如果追求复杂动画节奏（如弹性、延迟段），再考虑 @keyframes。

4. 可选优化项

添加遮罩层：点击遮罩关闭侧边栏
移动端适配：媒体查询调整宽度
内容淡入配合：文字 opacity 从 0 到 1 同步出现
使用 flex 或 grid 布局避免主内容被遮挡

基本上就这些。核心是控制宽度变化 + 过渡动画，transition 更适合这类交互，animation 更适合固定节奏播放。按需选择即可。

以上就是如何通过css animation制作侧边栏展开收缩效果的详细内容，更多请关注php中文网其它相关文章！