本文介绍一种简洁可靠的方案：通过 `classlist.toggle()` 切换元素状态，并利用 css `transition` 实现平滑的高度变化动画，避免 `visibility` 不可动画的限制，同时确保内容真正隐藏（不占布局空间）。
要实现点击按钮让方块“折叠展开”（类似下拉动画），关键在于用可过渡的属性替代不可动画的 visibility。原代码中尝试用 @keyframes 动画 visibility 和 max-height，但 visibility 本身不支持过渡或动画（它只有 visible/hidden 两种离散状态），而 max-height 的过渡在高度为 0 时也难以精准控制（需预设固定最大值，且初始 height: 0 与 visibility: hidden 可能导致动画无法触发）。
✅ 推荐方案：纯 CSS transition + height + overflow: hidden
这是更轻量、更可靠、更符合现代实践的方式：
<button onclick="toggle()">toggle</button> <div id="box"></div>
const toggle = () => {
const box = document.getElementById('box');
if (box) box.classList.toggle('expand');
};#box {
width: 50px;
height: 0;
background-color: red;
overflow: hidden; /* 关键！防止内容溢出破坏动画 */
transition: height 0.5s ease-in-out; /* 平滑过渡，推荐 0.3–0.6s */
}
#box.expand {
height: 100px; /* 设定展开后的目标高度 */
}? 为什么这样更优？
立即学习“Java免费学习笔记（深入）”；
- ✅ height 是天然支持 CSS 过渡的属性，浏览器渲染高效；
- ✅ overflow: hidden 确保高度为 0 时内容完全不可见且不占空间（满足你“需要 visibility: hidden”的实际需求）；
- ✅ 无需维护两个类名（expand/retract），单个 .expand 类即可表达状态，逻辑更清晰；
- ✅ 避免 @keyframes 复杂性，减少 CSS 体积和维护成本。
⚠️ 注意事项：
- 若 #box 内容高度动态（如文本行数不确定），建议改用 max-height 过渡（例如 max-height: 0 → max-height: 500px），并设置足够大的 max-height 值（需略大于可能的最大内容高度）；
- 切勿对 visibility 或 display 做过渡——它们不支持动画，强行使用会导致“瞬显/瞬隐”，破坏用户体验；
- 为保障可访问性，建议为按钮添加 aria-expanded 属性，并同步更新（例如：btn.setAttribute('aria-expanded', box.classList.contains('expand'))）。
? 小结：用 height + overflow + transition 替代 visibility + @keyframes，是实现折叠动画最简洁、兼容性好、性能优的标准解法。代码少、易调试、语义清晰，适合绝大多数展开/收起交互场景。
