transition 必须写在元素初始样式中才能生效，仅对可插值属性（如 opacity、transform、color）有效，且起止值格式需一致；直接 js 修改 style 会覆盖 transition，应通过 class 切换或 css 自定义属性控制。

transition 是让 HTML 元素平滑过渡变化的最直接、最常用方式，但它不是“写了就生效”，必须满足几个前提条件才能真正起作用。

transition 属性必须写在初始状态上，而不是悬停或切换后

很多人把 transition 写在 :hover 或目标 class 里，结果动画不触发。它必须定义在元素的**默认（初始）样式**中，浏览器才能在属性变化时“记住”要过渡什么。

• ✅ 正确：.box { background-color: #fff; transition: background-color 0.3s ease; } .box:hover { background-color: #007bff; }
• ❌ 错误：.box { background-color: #fff; } .box:hover { background-color: #007bff; transition: background-color 0.3s ease; }（hover 时才加 transition，已来不及）

只对可插值的 CSS 属性有效，且值格式必须一致

不是所有 CSS 属性都能过渡。display、height（从 0 到 auto）、font-family 等不可插值，过渡会直接失效；background-color 从 transparent 切到 #333 也可能跳变，因为部分浏览器无法计算 transparent 的中间色。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 推荐用的可过渡属性：opacity、transform、color、background-color（但起止值需同格式：全用 rgb() 或全用 #hex）
• 更安全的替代方案：用 transform: translateY(0) → transform: translateY(20px) 替代 top: 0 → top: 20px，避免触发布局重排
• 表格背景过渡尤其敏感，<tr> 上加 <code>transition 比整张 <table> 更稳定 <h3>JavaScript 修改 style 时容易绕过 transition</h3> <p>用 <code>element.style.backgroundColor = 'red' 直接赋值，会覆盖 CSS class 中定义的 transition 规则，导致“啪”一下变色。这不是 bug，是层叠优先级问题。
  • ✅ 推荐做法：用 element.classList.add('active') 或 element.classList.replace() 切换 class
  • 需要动态值？先设好 class，再通过 element.style.setProperty('--progress', value) 配合 CSS 自定义属性驱动过渡
  • 监听完成：用 element.addEventListener('transitionend', handler)，注意它可能被多次触发（多个属性过渡时）

  真正难的不是写 transition，而是判断「这次变化是否能被浏览器插值」——颜色格式、单位一致性、是否触发 layout、是否被更高优先级样式覆盖，这些细节一错，动画就消失。动手前先确认浏览器开发者工具里 computed 样式中 transition 是否被实际应用，比反复改代码更省时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！