transition一加载就自动触发是因为浏览器将初始渲染时属性值的变化也视为过渡。应避免内联触发动画的样式，用class控制动画时机，并确保变化发生在用户交互后。
transition 为什么一加载就自己动了
页面刚载入时，元素若已带有目标样式（比如 opacity: 0 或 transform: translateY(20px)），而 transition 又写在基础规则里，浏览器会把「从初始渲染状态到该样式的切换」也当成一次过渡——结果就是没交互就自己动了一次。
这不是 bug，是 transition 的正常行为：它只认「属性值变化」，不区分这个变化是 JS 加的、CSS 类切的，还是 DOM 初始渲染时就定死的。
- 避免在 HTML 中直接内联触发动画的样式，比如
<div style="opacity: 0"> <li>初始状态用不可动画的值兜底：例如用 <code>opacity: 1+visibility: hidden代替直接opacity: 0 - 或者让初始样式完全“静止”：比如位移用
transform: none，而不是transform: translateY(-100%)
用 class 切换控制 transition 启动时机
最可靠的方式是把 transition 声明保留在基础样式中，但让触发动画的属性变化**只发生在用户交互后加上的 class 里**。这样浏览器只会在 class 被 JS 添加那一刻才开始计算过渡。
示例：按钮点击展开提示框
/* 基础状态：有 transition，但属性值不触发动画 */
.tooltip {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0, 0.1, 1);
}
<p>/<em> 仅交互后才加上的类，真正改变属性 </em>/
.tooltip.active {
opacity: 1;
transform: scale(1);
}
</p>
- JS 中只做
el.classList.add('active')，不要在添加前先设el.style.opacity = '1'，否则会覆盖 CSS 规则，导致 transition 失效 - 如果需要点击后自动收起，用
transitionend事件监听，而不是定时器硬等——避免 duration 不一致导致错拍
用 :active 或 :hover 时 transition 不生效？
常见错误是把 transition 只写在 :active 里：
button:active {
background: #0056b3;
transition: background 0.2s; /* ❌ 这个声明不会起作用 */
}
因为 :active 状态极短（鼠标松开即消失），transition 需要「起始态」和「结束态」都匹配同一组 transition 声明。正确写法是：
button {
background: #007bff;
transition: background 0.2s ease;
}
button:active {
background: #0056b3; /* ✅ 松开时自动平滑回退 */
}
-
:active适合瞬时反馈，不适合长持续动效；想控制释放后的状态，必须靠基础规则里的 transition - 移动端要注意
:active默认不触发，需加* { touch-action: manipulation; }或监听touchstart
JS 动态插入元素时 transition 失效
刚用 document.createElement 插入节点，立刻加 active 类，经常看不到动画——因为浏览器还没完成首次渲染，属性变化被合并了。
- 必须强制一次重排（reflow）：在加 class 前读取一个布局相关属性，如
el.offsetHeight - 更稳妥的做法是用
requestAnimationFrame延迟到下一帧：
el.classList.add('init'); // 先加一个空类，确保样式已就绪
requestAnimationFrame(() => {
el.classList.add('active');
});
别用 setTimeout(..., 0)，它不保证在渲染前执行，在高负载设备上容易掉帧。
真正难的不是写对 transition，而是控制好「变化发生的时间点」——浏览器渲染管线很敏感，差一帧，动画就断了。
