transition-property 在老浏览器中单独声明会失效，因其需与 transition-duration 成对出现且不能为0s，推荐使用带-webkit-前缀的简写形式确保兼容。
直接写 transition-property 在老浏览器里大概率不生效——它不是“效果差”，而是压根没被解析，尤其当它单独出现、没配合 transition-duration 或写在错误位置时。
为什么单独声明 transition-property 会失效
IE10–IE11、Android 4.4 WebView、Safari ≤ 9 等引擎要求 transition 必须以完整简写形式或至少包含时长才能触发解析。只写 transition-property: opacity; 而不带 transition-duration，整条规则会被静默丢弃（DevTools 里显示为划掉的 invalid）。
- 必须成对出现：
transition-property和transition-duration都得有值，且不能为0s（Firefox 会判为无效） - 不要拆开写：
transition-property: transform;+transition-duration: 0.3s;在 Safari 9/10 中可能被忽略；应优先用简写transition: transform 0.3s; - IE10+ 不支持
transition-property: all中的某些值（如background-position），会导致该属性过渡失败，但不报错
老浏览器中 transition-property 的安全写法
别依赖单个子属性声明，老版本只认「完整、显式、顺序正确」的组合。标准版必须紧跟 -webkit- 前缀之后，且参数完全一致。
- 先写前缀版：
-webkit-transition-property: opacity, transform;-webkit-transition-duration: 0.3s, 0.3s; - 再写标准版：
transition-property: opacity, transform;transition-duration: 0.3s, 0.3s; - 更稳妥：直接用简写（兼容性更好）：
-webkit-transition: opacity 0.3s, transform 0.3s;transition: opacity 0.3s, transform 0.3s; - 避免混用：不要
transition: transform 0.3s;后又单独写transition-timing-function: ease-in;，这会重置整个过渡链
Computed 面板里 transition-property 显示为 none 怎么办
这不是 JS 没执行，是 CSS 层叠中它被覆盖、重置或压根没进入计算样式。老项目常见于全局重置规则或框架默认样式。
- 检查是否被
* { transition: none !important; }这类通配符规则干掉 - 确认没被父级继承覆盖：比如父元素写了
transition: all 0.2s;，子元素又没显式重写，就可能沿用all—— 但 IE10 对all支持不全，导致部分属性失效 - 用
getComputedStyle(el).transitionProperty在控制台手动读取，看返回值是"none"还是真实属性列表 - 如果返回
"none"，说明声明没活下来；如果返回空字符串，说明浏览器根本不认识这个属性名（比如写了filter却忘了加-webkit-前缀）
最常被忽略的一点：transition-property 不是“设一次就管用”的开关，它必须持续存在于元素的最终计算样式中——任何 class 移除、内联样式覆盖、或更高优先级规则介入，都会让它瞬间失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
