transition不生效的主因是未在属性变化前声明：必须将transition写在起始class中，且通过class切换触发变化，避免display:none；JS需用requestAnimationFrame或强制读取getComputedStyle确保样式已计算。
transition 不生效的常见原因
直接给元素写 transition 但首次渲染时没效果，是因为 CSS 过渡只在「属性值变化」时触发，而初始渲染是“从无到有”，没有前一个状态可过渡。浏览器不会自动把初始值（比如 opacity: 0）和目标值（比如 opacity: 1）之间补帧——除非你手动制造这个变化过程。
必须用 class 切换才能触发 transition
靠 JS 控制类名增删是最可靠的方式：先让元素带初始样式（隐藏/未动画状态），再通过添加另一个 class 触发属性变更。关键在于「两个 class 要定义同一组可过渡的属性」，且不能被其他规则覆盖。
-
transition必须写在「起始 class」或「通用基础 class」里，不能只写在「目标 class」中 - 初始 class 和目标 class 都要显式声明过渡属性，比如都含
opacity或transform - 避免用
display: none控制显隐——它会彻底移除渲染，transition失效；改用visibility: hidden+opacity: 0
.fade-element {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-element.active {
opacity: 1;
transform: translateY(0);
}
JS 触发：
const el = document.querySelector('.fade-element');
// 确保 DOM 已挂载、样式已计算
setTimeout(() => {
el.classList.add('active');
}, 10);
为什么 setTimeout(10) 是必要的
如果 JS 立即加 active 类，浏览器可能还在解析初始样式，导致“起始态”和“终态”被合并计算，跳过过渡。加个微小延迟（哪怕 0ms 的 requestAnimationFrame 或 setTimeout(..., 0)）能确保样式已落地，触发重排后再变类。
立即学习“前端免费学习笔记（深入）”；
- 更稳妥的做法是用
getComputedStyle(el).opacity强制读取一次，触发 layout - 或者用
requestAnimationFrame：它会在下一次绘制前执行，时机更精准 - 不推荐
setTimeout(..., 0)—— 它可能被事件队列延迟，requestAnimationFrame更可靠
transition 属性写在哪影响很大
很多人把 transition 只写在 .active 里，结果没用。因为 transition 描述的是「当该元素的某些属性变化时，如何过渡」，它必须存在于变化发生前的状态中。
- ✅ 正确：写在基础 class（如
.fade-element）里，或用通配类统一管理 - ❌ 错误：只写在
.fade-element.active中——此时元素已经完成变化，过渡早已错过 - ⚠️ 注意：如果用
all 0.3s，要小心意外过渡（比如height意外变化导致布局抖动）
复杂交互动画容易卡在“过渡没起来”这一步，核心就两点：类切换前确保初始样式已生效，transition 声明必须挂在变化前的节点上。漏掉任一，看起来就像“写了 transition 却没反应”。
