transition必须写在初始样式中，否则首次变化无动画；不可过渡属性需替换为opacity/visibility/max-height等；vue中子元素须唯一且用v-if；js动态插入元素需强制重排或延后设置样式。
transition没写在初始样式里
浏览器只在属性“从一个明确值变到另一个明确值”时才触发过渡，如果初始状态没声明transition，第一次变化就直接跳变。比如.box:hover { opacity: 0.5; transition: opacity 0.3s; }，hover进入时没有动画，因为transition是悬停后才生效的，起点无过渡上下文。
必须把transition写进默认样式：
.box {
opacity: 1;
transition: opacity 0.3s ease;
}
.box:hover {
opacity: 0.5;
}
用 DevTools 的 Computed 面板确认transition-property和transition-duration是否始终存在，而不是只在伪类里出现。
修改了不可过渡的 CSS 属性
display、height: auto、z-index、position这些属性不支持插值，写了transition也无效。
-
display: none → block：改用opacity+visibility+pointer-events -
height: auto：换成max-height（设一个足够大的值，如max-height: 500px）或transform: scaleY() - 子元素有
z-index导致父元素过渡失效：给父元素显式加z-index
Vue 中 <transition></transition> 动画不触发
不是 CSS 写错，而是框架机制限制：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
<transition></transition>的直接子节点必须唯一，不能是多个标签、文本或 Fragment - 用
v-if切换，别用v-show（后者只是display: none，不触发 enter/leave 钩子） -
scoped样式下，.fade-enter-active类名不匹配：必须用::v-deep .fade-enter-active或/deep/ .fade-enter-active穿透 - 过渡类名（如
v-enter-active）只控制过程，起始值（v-enter）和结束值（v-leave-to）的样式也得写全，且transition必须出现在基础类或-active类中
JS 动态插入元素后 transition 失效
元素插入 DOM 后立即设置目标样式（比如el.style.opacity = '0'），浏览器来不及建立过渡上下文，会跳过动画。
解决方法是强制重排（reflow）：
el.style.opacity = '0'; // 触发重排，让浏览器先读取当前计算样式 void el.offsetWidth; el.style.opacity = '1';
或者用setTimeout把目标样式延后一帧：
el.style.opacity = '0';
setTimeout(() => {
el.style.opacity = '1';
}, 0);
更稳妥的做法是：先加 class 触发 enter 阶段，再用nextTick（Vue）或requestAnimationFrame（原生）更新状态。
transition，只要初始状态里某个属性是auto、initial或未声明，浏览器就无法插值。务必在基础样式中显式写出所有参与过渡的属性初始值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
