transition-property写对但无动画，根本原因是缺少transition-duration（默认为0s导致跳变）；必须显式声明非零时间，且仅支持MDN标注“Animatable”的属性，如opacity、transform等，display、visibility等无效。
transition-property 写对了但没动画？先看 duration 是不是 0s
只写 transition-property: opacity 是不会动的——浏览器按默认 transition-duration: 0s 处理，等于直接跳变。必须配对声明时间，哪怕只是 0.01s。
常见错误写法：
-
div { transition-property: transform; }→ 静默失败 -
div { transition: transform; }→ 缺少 duration，语法非法，整条声明被忽略
正确写法（推荐分离写法，避免简写覆盖）：
button {
transition-property: transform, background-color;
transition-duration: 0.2s, 0.3s;
transition-timing-function: ease, ease-out;
}
注意：多个属性对应多个 duration 时，顺序严格一一对应，不能错位。
哪些 CSS 属性能进 transition-property 列表？别靠猜
transition-property 只接受「可动画化」（animatable）的属性，不是所有样式都行。比如 display、z-index、visibility、font-family 写进去也白搭，浏览器直接无视，不报错也不警告。
判断依据就一个：查 MDN 对应属性页顶部的「Animatable」字段是否标 ✅。高频可用属性包括：
-
opacity（0 → 1 完全支持） -
transform（推荐替代left/top，性能更好） -
width/height（但起止值都不能是auto） -
background-color/color（避免transparent↔rgba()跨模型切换） -
margin/padding（同 width/height，单位需明确，不能混用 % 和 px）
拼错属性名（如 opactiy）或用了不可动画属性，整条 transition-property 声明仍会解析成功，但那个属性就是不动——很难排查。
用 all 还是显式列属性？性能和意图都得权衡
transition-property: all 看似省事，实际隐患多：
- JS 改了一个
font-size，结果连box-shadow都跟着过渡，视觉乱跳 - 某些低性能属性（如
box-shadow、filter）被意外拖入动画，触发重绘甚至掉帧 - 父级继承了
all，子元素没显式覆盖，就可能被“带偏”
更稳妥的做法是显式列出真正需要过渡的属性：
a {
color: #007bff;
text-decoration: none;
transition-property: color, transform;
transition-duration: 0.2s;
}
a:hover {
color: #0056b3;
transform: translateY(-2px);
}
这样 text-decoration 或 border 的变化就是即时生效，不会干扰交互节奏。
JS 动态控制 transition-property 时要注意什么
用 JS 修改 style.transitionProperty 或切 class 控制过渡，容易踩两个坑：
- 浏览器不会在 JS 同步执行中“立刻”开始过渡——如果紧接着读取
offsetHeight或getComputedStyle，会强制重排，导致动画跳过第一帧 -
transitionend事件会在每个过渡属性完成时各触发一次。比如同时过渡transform和opacity，就会收到两次事件，需靠event.propertyName过滤
安全做法是加一层微任务延迟：
element.classList.add('is-open');
Promise.resolve().then(() => {
element.style.transform = 'scale(1.1)';
});
或者用 requestAnimationFrame 确保样式变更发生在下一帧渲染前。
最常被忽略的一点：transition 不是“自动播放”，它只响应「属性值变化」这个瞬间。如果起始值和结束值无法插值（比如 height: auto → 100px），或者中间被 JS 强制中断（如快速 hover 进出），动画就根本不会启动——这时候查 transition-property 是对的，但问题其实在值本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
