侧边栏展开收起可通过CSS transition实现流畅动画，常用width、transform或margin属性变化配合transition过渡。使用width时通过改变宽度触发重排，而transform利用translateX滑入滑出避免重排，性能更优。结合opacity可实现淡入淡出效果，提升视觉层次，visibility控制交互响应。JavaScript通过切换class触发动画，关键在于选择合适属性以平衡视觉效果与性能表现。
在网页开发中，侧边栏的展开与收起是常见交互效果。使用 CSS transition 可以让这个过程更加自然流畅，提升用户体验。通过控制宽度、变换（transform）或外边距（margin）等属性的变化过程，配合 transition 实现平滑动画。
基本实现原理
侧边栏的展开收起本质上是元素尺寸或位置的改变。CSS transition 能够监听这些属性的变化，并在设定时间内完成过渡。
常用可动画属性包括：
- width：控制侧边栏宽度从 0 到固定值（如 250px）变化
- transform：使用 translateX 或 scaleX 避免重排，性能更优
- left / right / margin：调整位置实现推拉效果
使用 width + transition 实现滑动展开
这是最直观的方式。侧边栏初始隐藏（width: 0），触发后变为正常宽度。
立即学习“前端免费学习笔记（深入）”；
.sidebar {
width: 0;
height: 100vh;
background: #333;
overflow: hidden;
transition: width 0.3s ease;
}
.sidebar.open {
width: 250px;
}
JavaScript 控制 class 切换即可触发动画：
document.querySelector('.toggle-btn').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('open');
});
使用 transform 提升性能
改变 width 会触发布局重排（reflow），而 transform 只涉及图层合成，性能更好。
可以将侧边栏移出屏幕，通过 transform 滑入：
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 250px;
height: 100vh;
background: #333;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.sidebar.open {
transform: translateX(0);
}
这种方式不会影响页面其他元素布局，动画更流畅。
结合 opacity 实现淡入淡出效果
为了增强视觉层次，可以同时过渡透明度和位置：
.sidebar {
transform: translateX(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.sidebar.open {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
注意：visibility 虽不能被 transition 动画化，但可用于精确控制元素是否响应交互。
基本上就这些。合理使用 CSS transition，能让侧边栏动效既美观又高效。关键是选择合适的可动画属性，并注意性能表现。不复杂但容易忽略细节。
