display 无法用 transition 动画，因其非可动画属性；应改用 opacity、transform 等替代方案，并注意无障碍、性能与移动端适配细节。
直接用 transition 动画 display 是无效的——浏览器根本不支持对 display 做渐变过渡，所有“隐藏→显示”瞬间跳变都是这个原因。
为什么 toggle 动画总卡顿或不生效
常见错误是写这样的 CSS：
.panel { display: block; transition: display 0.3s ease; }
.panel.hidden { display: none; }
这段代码完全没用。display 不是可动画属性，transition 对它不起作用。浏览器遇到 display: none 会立刻从渲染树中移除元素，中间没有“半隐藏”状态，自然无法插帧。
- 可动画的替代属性包括：
opacity、transform、max-height、height（需固定值）、margin、padding - 优先选
opacity + transform组合：性能好、兼容性高、无需预知尺寸 - 慎用
max-height过渡：设成0 → 500px看似简单，但若内容实际高度小于 500px，收起时会有“悬停感”；设成0 → fit-content则无法动画
checkbox + :checked 实现无 JS toggle 动画
纯 CSS 方案适合开关类控件（如主题切换、设置开关），依赖 input[type="checkbox"] 的状态驱动样式变化：
立即学习“前端免费学习笔记（深入）”；
- 必须用
input:checked + .track或input:checked ~ .track这类兄弟/后续选择器，不能靠 class 切换 - 动画要加在
.track和其伪元素上，比如.track::before的transform: translateX() - 确保
input没被display: none——改用opacity: 0; position: absolute;，否则屏幕阅读器和键盘焦点会丢失 - Safari 对
:checked + .content后续兄弟选择器支持稳定，但对:checked ~ .content在某些嵌套深度下有 bug，建议扁平结构
示例关键片段：
.toggle-input { opacity: 0; position: absolute; }
.toggle-label { display: inline-block; width: 60px; height: 30px; border-radius: 15px; transition: background 0.2s; }
.toggle-input:checked + .toggle-label { background: #4CAF50; }
.toggle-label::before { content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: white; top: 2px; left: 2px; transition: transform 0.2s; }
.toggle-input:checked + .toggle-label::before { transform: translateX(30px); }
JS 控制展开收起时，max-height 怎么设才不穿帮
用 max-height 做折叠动画最常踩的坑是“高度写死”或“写太小”，导致内容被截断或收不干净。
- 不要设
max-height: 0 → auto：auto 无法参与 transition - 安全做法：JS 先读取元素
scrollHeight，再设为max-height目标值 - 收起结束时，需在
transitionend后将max-height改回0，并同步设overflow: hidden防止内容溢出 - 如果内容高度变化频繁（如文字随窗口缩放重排），需要监听
resize并重新测量
简化的 JS 片段：
const el = document.getElementById('foldable');
el.style.maxHeight = el.scrollHeight + 'px';
// 动画结束后
el.addEventListener('transitionend', () => {
if (el.style.maxHeight === '0px') {
el.style.overflow = 'hidden';
}
});
toggle 动画里最容易被忽略的细节
很多人调完动画就以为完成了，但真实项目里这几个点经常导致上线后出问题：
-
will-change: transform要谨慎加——只在真正需要硬件加速的长动画上用，滥用反而降低性能 - 无障碍（a11y）不是加分项：开关必须有
role="switch"和aria-checked，且状态变更时要同步更新 - 移动端点击区域至少 44×44px，label 包裹 checkbox 是最省事的达标方式
- 动画时间别统一写 0.3s：开关滑块建议 0.2–0.25s（快而精准），大区块展开建议 0.3–0.4s（给用户感知时间）
