HTML过渡效果不生效怎么办？排查与解决方法-html教程-PHP中文网

transition必须写在初始样式中而非伪类或临时类里，否则浏览器无法识别属性变化过程；需显式声明可插值属性的起止值，避免使用display、height:auto等不可过渡属性。

html过渡效果不生效怎么办？排查与解决方法

transition 加了没反应，不是 CSS 写错了，而是浏览器根本没识别到“属性值在变”——它只对可插值、有明确起止值、且触发时机正确的属性生效。

常见现象：hover 时元素瞬间跳变、JS 切 class 后一闪而过、或压根没反应。核心问题在于浏览器没捕捉到“从 A 到 B 的变化过程”。

display、z-index、font-family 这类离散值属性不支持插值，加了 transition 也白搭
起始状态没显式声明：比如只写 .box:hover { opacity: 0; }，但基础样式里没设 opacity: 1，浏览器可能取默认 opacity: 1（看似一样，实则计算路径不同）
JS 修改样式后立刻改回，中间没留重排机会：浏览器把两次赋值合并成一次渲染，过渡被跳过
transition 被写在 :hover 或临时 class 里，而不是基础选择器中——类一删，过渡规则就消失

这是最常踩的坑。浏览器只在属性值变化前检查 transition 是否存在；如果它只在悬停态才出现，变化已经发生，动画自然失效。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

❌ 错误写法：.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）都必须遵守这个原则

它们不是“数值型”属性：auto 不是可计算值，none/block 是离散开关，浏览器无法生成中间帧。

替代 height: auto：用 max-height 模拟，收起时设 max-height: 0; overflow: hidden，展开时设足够大的值（如 max-height: 500px）
替代 display: none：用 opacity: 0 + visibility: hidden 控制视觉隐藏，再通过 transitionend 事件或 CSS animation-fill-mode 后续设 display: none
表格行 tr:hover 变色无效？是因为 tr 不渲染背景，得给 td 显式设初始 background-color 并把 transition 写在 td 上

关键不是“加 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）