transition-property 必须显式声明目标属性，不可依赖 all；需严格匹配 css 属性名（全小写、带横线）、避免简写、注意可插值性，并配合 transition-duration 才能生效。
transition-property 必须显式声明，不能依赖 all
直接写 transition: all 0.3s 看似省事，但浏览器会把所有可动画属性（比如 opacity、transform、background-color、box-shadow）全拉进过渡队列——而你可能只改了颜色，结果阴影也跟着动，甚至触发意外重排。更麻烦的是，all 对 display、z-index 这类不可插值属性完全静默失效，不报错也不提醒，调试时根本找不到原因。
正确做法是用 transition-property 锁定目标：
-
transition-property: background-color—— 只响应背景色变化 -
transition-property: transform, opacity—— 多个属性用逗号分隔，中间**不能有空格**（transform,opacity合法，transform, opacity在部分旧 WebView 中会失效） - 避免混用：如果用了
transition: background-color 0.3s，就别再单独设transition-property，否则后者会覆盖前者
属性名必须与实际变更的 CSS 属性严格匹配
写了 transition-property: background，但 JS 改的是 element.style.backgroundColor，过渡不会生效——因为 background 是复合属性，而 backgroundColor 是子属性，二者在渲染引擎里走不同通道。同理，transition-property: border 不可靠，得拆成 border-color 或 border-width。
常见不匹配陷阱：
- 拼写错误：
opactiy（少个r）、backgound-color（少个r）——整个声明失效 - 大小写混淆：
BackgroundColor或BGColor无效，必须全小写、带横线 - 误用简写：
flex不支持过渡，要拆成flex-grow、flex-basis等具体子属性
transition-property 不控制“值范围”，只控制“谁参与”
transition-property 只是个开关清单：开就过渡，关就不动。它不管“从哪到哪”，也不限制数值区间。比如你设了 transition-property: opacity，那只要 opacity 值变了（哪怕从 0.1 到 0.15），就会触发过渡；反过来，就算你写了 transition-property: opacity，但 JS 没真正改 opacity 的计算样式（比如只改了 class 却没触发重排/重绘），动画照样不启动。
真正决定是否动、怎么动的，是这三件事：
- 该属性是否可插值（查 MDN 的「Animatable」字段，如
width是 yes，display是 no） - 属性值是否真实发生了计算样式变化（DOM 更新后需触发 layout/paint）
- 是否配了
transition-duration（漏掉这个，哪怕 property 写对了，也完全不会动）
多个属性过渡时，duration 和 timing-function 怎么配
如果只写 transition-property: opacity, transform 和 transition-duration: 0.3s，那两个属性都用 0.3 秒；但如果你想让 opacity 淡入慢一点、transform 缩放快一点，就必须用简写完整声明：
transition: opacity 0.5s ease-in, transform 0.2s ease-out;
注意顺序和数量必须严格对应：第一个 duration 绑第一个 property，第二个绑第二个。漏一个、多一个，都会导致后面的部分被忽略或 fallback 到默认值。
容易踩的坑：
- 重复声明
transition会覆盖前一个，不是叠加 - 在
:hover里再写transition，会导致进出不对称（进入用 hover 里的规则，离开用基础规则），维护困难 -
transition必须写在属性将要变化的元素本身上，父级或兄弟元素上写无效
最常被忽略的一点：transition 的触发依赖「计算样式的实际变更」。JS 批量操作 DOM 时，如果在一次任务中既加 class 又读 offsetHeight，浏览器可能强制同步计算，导致过渡被跳过。真正在意精确时机，得用 getComputedStyle + requestAnimationFrame 配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
