transition-property 必须显式声明且与 transition-duration 配对生效，仅设 property 无动画；多属性过渡需严格按顺序匹配 duration，推荐用简写避免歧义；JS 动态控制时注意兼容性及强制重排触发。
transition-property 必须显式声明，不能靠 transition 简写自动推断
很多人以为写了 transition: all 0.3s 就万事大吉，结果改了 transform 或 opacity 却没动画——因为某些浏览器（尤其是旧版 Safari 和部分 Android WebView）对 all 的支持不一致，或会忽略非标准可动画属性。更稳妥的做法是明确列出你要过渡的属性。
常见可动画 CSS 属性包括：width、height、opacity、background-color、color、transform、left/top（需配合 position）、font-size 等；不可动画的如 display、z-index、visibility（但可用 opacity + pointer-events 模拟）。
-
transition-property: width, height, background-color;—— 多个属性用英文逗号分隔，空格不影响 - 不要写成
transition-property: "width, height"—— 引号是非法的，会导致整个声明失效 - 避免滥用
all：它会尝试过渡所有变更的属性，可能意外触发低性能属性（如box-shadow大量重绘），也容易掩盖遗漏的transition-duration
transition-property 和 transition-duration 必须配对生效
transition-property 单独存在毫无作用。CSS 过渡是“属性变化 + 时间约束”共同触发的机制。如果只设了 transition-property: opacity 但没设 transition-duration，浏览器按默认值 0s 处理，等于无过渡。
注意：简写 transition 中的 duration 是必填项；而分开写时，transition-duration 也必须显式声明，哪怕只是 0.01s。
- 错误写法：
div { transition-property: opacity; }→ 无动画 - 正确写法：
div { transition-property: opacity; transition-duration: 0.2s; } - 简写等效：
div { transition: opacity 0.2s; }（此时timing-function和delay使用默认值）
多个 transition-property 对应多个 transition-duration 时，顺序严格绑定
当你要为不同属性设置不同持续时间（比如宽度变慢、颜色变快），可以写成：
div {
transition-property: width, background-color;
transition-duration: 0.6s, 0.2s;
}
这里两个值按从左到右顺序一一对应，width 用 0.6s，background-color 用 0.2s。如果数量不匹配，浏览器会循环或截断处理（行为不统一，Chrome 截断，Firefox 可能循环），极易出错。
- 推荐做法：用简写一次写全，避免歧义 ——
transition: width 0.6s ease, background-color 0.2s linear; - 注意逗号前后空格不是必须的，但逗号本身不能省略
- 不要混用简写和拆分写法在同一选择器里，比如同时写
transition和transition-duration，后者会被前者覆盖
JavaScript 动态修改 style.transitionProperty 时要注意兼容性
用 JS 控制过渡属性（比如根据用户操作切换动效目标）时，别直接写 element.style.transitionProperty = "transform, opacity"，IE 和部分老版本 Edge 不支持该属性名；应使用驼峰写法 transitionProperty（现代浏览器已统一），但更稳妥的是走 transition 简写路径。
另外，通过 JS 修改内联样式触发过渡，必须确保新旧状态之间有“可检测的变化”，例如：
- 先加类再改样式，或
- 强制重排（
offsetHeight读取）后再改样式，否则浏览器可能合并渲染，跳过过渡 - 避免在同一个事件循环中连续设置
style.transform和style.transition，中间至少插入一次微任务（Promise.resolve().then(...)）
真正容易被忽略的点是：transition 的触发依赖「计算样式变更」，而不仅仅是 DOM 属性变化。很多 bug 都卡在 JS 改了样式却没让浏览器感知到“状态切换”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
