transition-property 是白名单机制而非开关，仅对规范定义的可动画属性生效；写错值或滥用 all 会导致动画静默失效，必须与 duration 等配合且 js 动态修改时需确保 property 提前就绪。
transition-property 值写错会导致动画完全失效
它不是“开关”，而是白名单机制：只对列表里明确写出的 CSS 属性做过渡，其余一概忽略。常见错误是写成 transition-property: all 却期望 display 或 height（从 0 到 auto）能动——这两者根本不在可动画属性列表里。
-
display不可动画，切勿放进transition-property；改用visibility+opacity组合 -
height: auto无法插值，要过渡高度得用具体数值（如height: 0→height: 120px）或改用max-height - 缩写属性如
background或border不推荐直接写进transition-property，浏览器解析不一致；拆成background-color、border-color更可靠
transition-property 支持的合法值有哪些
只有 CSS 规范明确定义为“可动画”（animatable）的属性才有效。MDN 的 CSS animated properties 页面是唯一可信依据，别信“网上说可以”的二手经验。
- 常用安全项：
color、opacity、transform、background-color、left/top（需配合position）、font-size - 危险高危项：
width/height（含auto值时失效）、margin/padding（百分比值在某些浏览器中跳变）、clip-path（Safari 旧版本不支持） -
transition-property: all看似省事，实则埋雷：一旦后续加了不可动画属性（比如content），整个过渡链可能静默降级，连控制台都不报错
和 transition-duration / delay 搭配时的常见断点
单独设 transition-property 没用，必须和 transition-duration 同时存在才触发动画逻辑。但三者（property / duration / timing-function）的匹配规则容易被忽略。
- 如果用简写
transition: background-color 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)，那么每组必须严格对应一个transition-property，顺序错一位就全乱套 - 多个属性过渡时间不同，不能靠单条
transition简写“猜顺序”；老老实实用多行声明更可控：transition-property: background-color, transform;<br>transition-duration: 0.3s, 0.2s;<br>transition-timing-function: ease, cubic-bezier(0.4, 0, 0.2, 1);
-
transition-delay只作用于它所在那一组声明；混用简写和分写时，delay 容易被覆盖或遗漏
JavaScript 动态修改时 property 值丢失的坑
用 JS 改 class 或 style 触发动画时，transition-property 必须在动画开始前已生效，否则浏览器来不及建立过渡上下文。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：先改
element.style.height = '200px'，再加 class 设置transition-property: height—— 此时动画已跳变完成，property 生效太晚 - 正确顺序：先加 class（含
transition-property和初始状态），再用offsetHeight或getComputedStyle强制重排，最后改目标值 - 用
requestAnimationFrame包裹第二步更稳妥，避免因渲染管线优化导致重排被合并
transition-property 是那个最硬的闸门——开错缝，后面全白搭。 
