使用 transform 和 transition 实现侧边栏折叠动画，通过 translatex 位移避免重排重绘，结合 javascript 切换类名控制展开与收起状态，配合 margin 变化同步主内容区位移，动画流畅且性能优越。
要实现侧边栏的折叠与展开动画，使用 CSS animation 结合 transform: translateX() 是一种高效且性能友好的方式。这种方案避免重排重绘，仅操作图层位移，动画更流畅。
基本结构设计
先构建一个基础的HTML结构，包含一个可折叠的侧边栏和主内容区域：
<div class="layout">
<aside class="sidebar" id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">☰</div>
<nav>
<a href="#">首页</a>
<a href="#">设置</a>
<a href="#">帮助</a>
</nav>
</aside>
<main class="content">
<h1>主内容区</h1>
</main>
</div>
基础样式设置
为侧边栏设定固定宽度，并默认显示在可视区域内。通过 transform 控制位移，配合 transition 实现平滑过渡：
.sidebar {
width: 250px;
background: #333;
color: white;
position: fixed;
top: 0;
left: 0;
bottom: 0;
transform: translateX(0);
transition: transform 0.3s ease;
z-index: 1000;
}
.sidebar.collapsed {
transform: translateX(-250px);
}
.content {
margin-left: 250px;
transition: margin-left 0.3s ease;
}
.sidebar.collapsed ~ .content {
margin-left: 0;
}
交互控制折叠状态
通过JavaScript切换类名来触发CSS过渡效果：
立即学习“前端免费学习笔记（深入）”；
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('collapsed');
}
</font>
点击按钮时，toggleClass('collapsed') 会添加或移除类，从而激活CSS中的 transition 动画。
使用 CSS Animation（进阶）
若需更复杂的入场/出场动画（如带淡入淡出、缩放），可结合 @keyframes 定义关键帧动画：
@keyframes slideIn {
from {
transform: translateX(-250px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 0;
}
to {
transform: translateX(-250px);
opacity: 1;
}
}
.sidebar.animate-in {
animation: slideIn 0.4s forwards;
}
.sidebar.animate-out {
animation: slideOut 0.4s forwards;
}
注意：animation 通常用于一次性播放的动画，适合首次加载或提示类动效。持续交互推荐使用 transition 更便于状态回退。
基本上就这些。用 transform + transition 实现侧边栏折叠最实用，性能好又容易控制。加点透明度变化或缓动函数，视觉效果更自然。
