渐进式过渡效果需拆解为可插值步骤并控制触发时机；height: auto无法过渡因目标值不可计算，可用max-height或JS读取scrollHeight替代；图片模糊到清晰应分层控制src与filter；表格行更新须对td设过渡而非tr；所有过渡依赖样式就绪，否则静默失败。
渐进式过渡效果不是指“慢慢出现”，而是指状态变化时，视觉上存在可感知的中间过程——比如模糊图→清晰图、旧内容淡出+新内容淡入、高度从0展开到auto。关键在于：不能依赖单一属性硬切，得拆解为可插值的步骤，并控制触发时机。
transition 为什么对 height: auto 失效
浏览器无法计算 height: auto 的目标数值，也就没法做线性插值。过渡必须在两个明确的、可比较的值之间发生（如 height: 0 → height: 200px）。
- 替代方案一：用
max-height过渡，设一个足够大的上限（如max-height: 500px），确保内容能完全展开 - 替代方案二：JS 先读取元素
scrollHeight，再设height为该值，然后过渡；动画结束后再设回height: auto - 常见错误：只写
transition: height 0.3s却没给初始和结束值都写具体数字，结果毫无动画
图片模糊到清晰必须绕开 filter 直接过渡
filter: blur(6px) 看似可过渡，但高清图加载完成瞬间替换 src 会触发重绘抖动，尤其在低端设备上明显卡顿。真正稳定的做法是分层控制。
- HTML 中用
<img src="lqip.jpg" alt="HTML怎么实现渐进式过渡效果" >，src始终指向低质量占位图 - CSS 写
img { filter: blur(6px); transition: opacity 0.3s ease, filter 0.4s ease; }，不直接过渡src变更本身 - JS 在高清图
load后，先加class="loaded"，再通过.loaded { filter: blur(0); opacity: 1; }触发过渡 - 别用
loading="lazy"替代 IntersectionObserver——它只控制加载时机，不保证过渡节奏
表格行更新时不能靠 tr:hover 或 transition content
<tr> 不是独立渲染盒，对它设 <code>background-color 过渡基本无效；content 属性也不支持 transition，所以纯 CSS 无法让“文字内容”淡入。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：给
<td> 显式设初始背景色（如 <code>background-color: #fff），再写transition: background-color 0.25s ease在默认样式里 - 数据更新后，用 JS 添加临时 class（如
td.updating），配合@keyframes实现入场动画：animation: slideIn 0.3s ease-out forwards - 整行高亮需写
tr:hover td，而不是tr:hover—— 后者在多数浏览器中不生效 - 移动端无 hover，必须用 JS 切换 class 模拟，且要防连续点击导致动画叠加
最易被忽略的一点：所有渐进式过渡都依赖「状态变更前后的样式已就绪」。如果 JS 动态插入元素后立刻改 class，而 CSS 规则还没加载完，或 transition 属性写在媒体查询里却没匹配上，动画就会静默失败——这种问题不会报错，只能靠 DevTools 的 Animation 面板逐帧检查快照是否捕获成功。
