展开，也要有来处
看清展开按钮和新增内容的空间关系。
互动实验在真实界面中看
正在准备互动实验…
02 — COMPARE / 看见方法的作用
同一个任务，换一种处理方式。
先看两种实现，再找出让交互更清楚的那条规则。
未使用 Skills · 基础实现基础版本
正在准备互动实验…
内容立即出现，完成展开。
使用 Skills · 应用交互规则规则应用
正在准备互动实验…
内容逐步展开，前后位置更容易追踪。
01 / 改了什么
保持字形与布局语义，增加可中断的高度过渡。
02 / 为什么这样改
变化应该帮助追踪内容，而不是让文字被压扁。
03 / 什么时候不需要
频繁开关、长篇内容或性能不足时，直接展开同样合理。
教学示意，非 AI 生成实测。两侧的任务、内容和输入条件一致；只比较这里说明的规则。Skills 不保证每次生成相同结果。
03 — APPLY / 放进真实项目
变化应该帮助追踪内容，而不是让文字被压扁。
01开关状态由按钮表达，使用 aria-expanded 与对应内容关联。
02高度变化确实影响文档流，不能把 scaleY 当作所有情况的替代。
03这个演示用网格轨道过渡，小范围布局变化需要实际检查开销。
适合用在FAQ设置中的补充选项案例深入解释
把这段需求，交给你的 AI
为补充说明添加折叠区。保持文字本身的比例，按钮暴露展开状态，隐藏内容不接受键盘焦点。快速反向操作从当前状态继续，减少动态效果时立即展开。
实现代码与机制 ＋
以下片段解释核心机制，需要与状态、语义和清理逻辑一起使用。页面演示由本地受控组件实现。
.disclosure { display: grid; grid-template-rows: 0fr;
transition: grid-template-rows 240ms cubic-bezier(.25,1,.5,1); }
.disclosure[data-open=true] { grid-template-rows: 1fr; }
.disclosure > div { min-height: 0; overflow: hidden; }原理、来源与适用边界 ＋
频繁开关、长篇内容或性能不足时，直接展开同样合理。
减少动态效果时去掉装饰位移、回弹和自动连续播放，保留功能、状态文字与手动查看步骤。
阅读对应的中文方法笔记 ↗本案例是独立教学实现。前后对比说明具体规则，不是对某个模型的效果承诺。