transition 不能直接用于 layout 属性（如 height、display）因触发重排且无中间状态；应改用 max-height、opacity+visibility+pointer-events 组合；仅安全过渡 transform 和 opacity，且 transition 必须声明在默认状态，配合合理时长与缓动函数。
直接用 transition 对布局属性（如 width、height、margin）加动画，90% 会卡顿或失效——这不是你代码写错了，而是浏览器底层限制决定的。
为什么 display / height: auto 无法过渡
display 是离散值（none / block / flex），没有中间状态，transition 根本不识别；height: auto 也无法插值计算，浏览器不知道“auto”该变成多少像素。
- 错误写法：
transition: height 0.3s;+height: auto;→ 动画不触发或直接跳变 - 正确替代：用
max-height模拟，初始设max-height: 0;，展开时设一个足够大的固定值（如max-height: 500px;），并配overflow: hidden; - 显隐控制别碰
display：改用opacity: 0;+visibility: hidden;+pointer-events: none;组合
哪些 CSS 属性真正适合布局过渡
只过渡能走 GPU 合成层、不触发重排（layout）的属性，否则滚动/动画必然掉帧。
- 安全首选：
transform（位移/缩放/旋转）、opacity—— 浏览器自动进合成层，性能最高 - 谨慎使用：
width、height、margin、padding—— 改它们会强制重排，尤其在表格、Flex 容器里更明显 - 绝对避免：
all，它会把font-size、border-color等无关属性也卷进来，动画抖动、渲染延迟都由此来 - 示例：下拉菜单位移应写
transform: scaleY(0);→transform: scaleY(1);，而非height: 0;→height: 200px;
transition 必须声明在基础状态，不是 hover 或类里
很多人把 transition 写在 :hover 或 .open 类中，结果只有进入有动画、离开直接“啪”一下回弹——因为移出时规则被移除，浏览器没机会执行过渡。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须写在默认样式里：
.panel { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; } -
transform要有明确初始值，比如transform: translateY(0);，否则移出后残留矩阵值，下次进入起点错乱 - JS 控制时，加类前需强制重排：
element.offsetHeight;（读任意布局属性），否则 DOM 更新和样式变更被合并，过渡起点丢失
timing-function 和 duration 怎么选才不卡
缓动曲线和时长不是凭感觉调的，人眼对 200ms–300ms 最敏感，超过就感知延迟，太短又觉得突兀。
- 微交互（按钮悬停、开关切换）：
0.15s – 0.25s，推荐cubic-bezier(0.4, 0, 0.2, 1)（比ease-in-out更干脆） - 布局级切换（折叠面板、侧边栏展开）：
0.3s – 0.4s，可加transition-delay: 0.05s让节奏更自然 - 避免
linear：它无加速减速，看起来像机械滑动，尤其在位移类动画中特别假 - 慎用
ease-in-out做布局切换：开头结尾都减速，容易在收尾处“粘住”，用户会觉得“还没结束”
最难的部分不是写出能动的 CSS，而是判断哪些变化该由 CSS 自动过渡、哪些必须 JS 精确控制起止时机——比如滚动中动态展开的导航栏，transform 的数值得随 scrollY 实时算，这时候 transition 反而得关掉，换用 requestAnimationFrame 驱动。
