transition首次加载自动执行是因浏览器将CSS加载与HTML解析混序，导致“无样式→有样式”被误判为可过渡；需用no-transition类禁用后在load事件中移除。
transition在页面首次加载时自动执行一次
这是最典型的“误触发”现象：元素一挂载就从初始值跳到目标值，比如 transform: rotate(90deg) 在页面打开瞬间转一下，不是交互触发的。根本原因是浏览器把 link 加载的 CSS 和 HTML 解析顺序混在一起，导致样式规则在 DOM 尚未完全稳定时就被应用，transition 把“从无样式到有样式”的过程也当作了可插值变化。
解决思路很直接：先禁用所有 transition，等页面真正 ready 后再放开。
- 给
加一个临时 class，例如no-transition - 在全局 CSS 中写：
.no-transition * { transition: none !important; } - 用
window.addEventListener('load', () => document.body.classList.remove('no-transition'))移除它——注意必须是load，不能用DOMContentLoaded，因为后者不保证图片、字体等资源已就绪，仍可能抢跑
JS 动态添加元素后 transition 不动
你调了 el.classList.add('fade-in')，但元素只是“啪”一下出现，没有淡入。这不是浏览器 bug，是你没给它留出“拍起始帧”的机会。
浏览器渲染流水线里，样式计算（style）→ 布局（layout）→ 绘制（paint）是一气呵成的。如果 JS 连续设置 class、属性，中间没插入强制读取布局的操作，浏览器就会把“初始态 → 终态”合并为一次渲染，过渡自然消失。
- 正确顺序：先加 class（此时元素已有起始样式），再强制读取一个布局相关属性，如
el.offsetHeight或void el.offsetWidth，最后再加触发类（如.active） - 不要用
getComputedStyle(el).opacity代替——它不一定触发重排，而offsetHeight是确定会的 - Vue/React 中别在
mounted或useEffect里直接改 class；等框架完成 DOM 更新后，用nextTick（Vue）或flushSync（React）包裹再操作
transition 写在:hover里导致首次悬停无动画
鼠标移上去颜色变了，但没过渡；第二次才有。这是因为 transition 被写进了伪类规则，浏览器只在 :hover 激活时才声明它，而第一次变化发生时，“起点”还没被记录。
transition 必须定义在默认状态上，让浏览器从元素创建那一刻就开始监听该属性的变化。
- ❌ 错误：
.btn:hover { color: #f00; transition: color 0.2s; } - ✅ 正确：
.btn { color: #333; transition: color 0.2s; } .btn:hover { color: #f00; } - 检查 DevTools 的 Computed 面板，确认
transition-property在非 hover 状态下就存在，而不是只在 hover 时才出现
Vue scoped 样式下动态插入的元素没过渡
你在 Vue 单文件组件里写了 ，然后用 document.createElement 创建节点并 appendChild 到容器中，结果 transition 完全不生效。
原因很实在：scoped 会给选择器和对应 DOM 元素都加上 data-v-xxxx 属性，而 JS 手动创建的节点没有这个属性，CSS 规则根本匹配不上。
- 不要去掉
scoped——这会破坏样式隔离边界 - 把过渡相关样式提到全局
块里，不加 scoped - 或者用穿透写法：
::v-deep(.dynamic-item)（Vue 2）或:deep(.dynamic-item)（Vue 3） - 验证方式：打开 Elements 面板，看动态元素是否真有目标 class，且 Computed 中
transition不是none
关键点始终是：transition 不是“加了就动”，它依赖浏览器对“起点→终点”的两次独立样式快照。任何打断这个链条的操作——无论是时机不对、选择器不匹配，还是起始值缺失——都会让动画静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
