transition必须写在属性将要变化的元素本身上，而非父级或兄弟元素；transition-property需明确指定可动画属性，不能依赖通配符或all；transition-delay和duration必须带单位；动画触发需计算样式真实改变。
transition写在哪个元素上才生效
过渡动画必须写在「属性将要变化的元素」本身上，不是写在触发它的父级或兄弟元素上。很多人把 transition 加在按钮上，结果 hover 时改变的是子元素颜色，动画却没反应——因为子元素自己没声明 transition。
- 想让某个属性平滑变化，就给那个属性所在的元素加
transition - 如果通过 JS 修改
className触发样式变化，transition 仍需写在目标元素的原始 CSS 规则里，不能只写在新 class 中（除非新 class 也带 transition） - 注意继承：
color可以继承，但transition不继承，子元素要用就自己写
transition-property填什么才真正起作用
填错 transition-property 是最常被忽略的失效原因。它不接受通配符，也不识别“所有可动画属性”，必须明确列出要过渡的属性名，或者用 all（但有风险）。
- 推荐写具体属性，比如
transition-property: background-color, transform;，避免意外过渡其他值 -
all看似省事，但会尝试过渡所有可变属性（包括display、height这类不可动画的），可能引发布局抖动或静默失败 - 某些属性根本不能过渡，比如
position（值是关键字）、font-family、visibility，写了也不会动 - 简写
transition: background-color 0.3s;默认等价于transition-property: background-color;，安全且清晰
transition-delay和transition-duration容易混淆的时间单位
这两个参数都要求带单位，缺一不可；而且 transition-delay 的“延迟”是从状态变化开始算，不是从鼠标移入开始算——这点在链式交互中特别关键。
-
transition-duration和transition-delay都必须写单位，如0.3s或300ms，写成0.3或300会被浏览器直接忽略 - 如果同时设置多个属性过渡，但只给了一个时间值，比如
transition: all 0.3s ease;，那所有属性共用这个时长；若想差异化，得用逗号分隔完整声明：transition: width 0.2s, opacity 0.5s; - delay 在 hover + transform 场景下容易误判：鼠标快速进出多次，delay 会累积排队，造成“卡顿假象”，此时应优先考虑用
transition-timing-function: ease-out缓解
transition触发动画失败的三个典型现象
不是代码写错，而是 DOM 状态没真正“变”。浏览器只对「计算样式发生变化」的属性做过渡，中间任何环节断开都会静默失效。
- 刚插入 DOM 就立刻改样式（如 JS 创建元素后马上加 class）：浏览器还没完成 layout，过渡不触发 → 加个
setTimeout(() => { el.classList.add('active'); }, 0);或用el.offsetHeight强制重排 - 用
display: none切换显隐：display 变化不可动画，整个元素消失/出现是瞬时的 → 改用opacity+visibility组合 - 修改了属性但没触发重绘，比如只改了
padding却忘了元素没有设定box-sizing: border-box，导致 width 实际没变 → 检查 computed style 是否真变了
过渡动画真正的门槛不在写法，而在于理解浏览器何时认为“属性值变了”——它看的是最终计算样式，不是你写的 CSS 规则或 JS 赋值动作。每次动效卡住，先打开开发者工具的 computed 面板，盯着那个属性的数值是不是真的在变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
