使用CSS transition控制侧边栏宽度变化实现展开收缩，通过JavaScript切换类名触发动画，transition比animation更适用于此类交互效果。
要实现侧边栏的展开和收缩效果，使用 CSS Animation 是一种简洁高效的方式。你可以通过控制侧边栏的宽度或使用 `transform` 配合 `overflow` 来实现平滑动画。下面是一个实用且易于理解的实现方法。
1. 基础 HTML 结构
首先定义一个包含按钮和侧边栏的基本结构：
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，也可以这样写：
立即学习“前端免费学习笔记（深入）”；
@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');
});
建议： 如果用 transition，逻辑更直观；如果追求复杂动画节奏（如弹性、延迟段），再考虑 @keyframes。
4. 可选优化项
- 添加遮罩层：点击遮罩关闭侧边栏
- 移动端适配：媒体查询调整宽度
- 内容淡入配合：文字 opacity 从 0 到 1 同步出现
- 使用 flex 或 grid 布局避免主内容被遮挡
基本上就这些。核心是控制宽度变化 + 过渡动画，transition 更适合这类交互，animation 更适合固定节奏播放。按需选择即可。
