transition必须写在初始样式中而非伪类或临时类里，否则浏览器无法识别属性变化过程；需显式声明可插值属性的起止值，避免使用display、height:auto等不可过渡属性。
transition 加了没反应，不是 CSS 写错了，而是浏览器根本没识别到“属性值在变”——它只对可插值、有明确起止值、且触发时机正确的属性生效。
为什么 transition 写了却完全不动？
常见现象：hover 时元素瞬间跳变、JS 切 class 后一闪而过、或压根没反应。核心问题在于浏览器没捕捉到“从 A 到 B 的变化过程”。
-
display、z-index、font-family这类离散值属性不支持插值，加了transition也白搭 - 起始状态没显式声明：比如只写
.box:hover { opacity: 0; }，但基础样式里没设opacity: 1，浏览器可能取默认opacity: 1（看似一样，实则计算路径不同） - JS 修改样式后立刻改回，中间没留重排机会：浏览器把两次赋值合并成一次渲染，过渡被跳过
-
transition被写在:hover或临时 class 里，而不是基础选择器中——类一删，过渡规则就消失
transition 必须写在初始样式里，不能放 :hover 或临时 class 中
这是最常踩的坑。浏览器只在属性值变化前检查 transition 是否存在；如果它只在悬停态才出现，变化已经发生，动画自然失效。
- ❌ 错误写法：
.btn:hover { transition: background-color 0.3s; background-color: #35527e; } - ✅ 正确写法：
.btn { transition: background-color 0.3s ease; }+.btn:hover { background-color: #35527e; } - 同理，
position: relative必须在基础样式中声明，否则top、left在 hover 里设了也没用 - 所有过渡属性（如
width、max-height、transform）都必须遵守这个原则
height: auto 和 display: none 为什么不能过渡？
它们不是“数值型”属性：auto 不是可计算值，none/block 是离散开关，浏览器无法生成中间帧。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 替代
height: auto：用max-height模拟，收起时设max-height: 0; overflow: hidden，展开时设足够大的值（如max-height: 500px） - 替代
display: none：用opacity: 0+visibility: hidden控制视觉隐藏，再通过transitionend事件或 CSSanimation-fill-mode后续设display: none - 表格行
tr:hover变色无效？是因为tr不渲染背景，得给td显式设初始background-color并把transition写在td上
JS 动态改样式时，如何强制触发过渡？
关键不是“加 class”，而是让浏览器先读旧值、再写新值，中间插入一次布局强制刷新。
- 改完初始值后，立即读一个布局相关属性，例如：
el.style.width = '100px'; void el.offsetWidth; el.style.width = '200px'; - 用
classList切换时，别remove再add，改用replace或确保transition始终保留在基础类中 - SPA 路由切换中，
pushState后 DOM 没重建，得手动插入新内容 → 强制读布局（如el.scrollHeight）→ 再加动画类 - View Transitions API 失效？检查
view-transition-name是否大小写一致、是否在旧/新元素上都存在、旧元素是否还可见（不能提前opacity: 0）
最容易被忽略的是：transition 不是“加了就动”，它依赖浏览器在两个渲染帧之间识别出“值变了”。任何绕过这个机制的操作（比如内联 style 覆盖、删掉含 transition 的 class、用不可插值属性），都会让动画退化为瞬时切换。
