页面首次加载时transition自动触发，根本原因是未在基础选择器中声明明确起始值，导致浏览器首帧强行插值；应显式设置opacity、transform等初始值，并用.preload类锁定终态，待domcontentloaded后移除以解耦初始渲染与过渡。
页面首次加载时transition自动触发怎么办
页面一打开就看到元素“滑”一下到初始位置，不是bug，是浏览器把未声明的初始值当作了过渡起点。根本原因：CSS里只写了终态（比如transform: rotate(360deg)），没写基础选择器里的起始值，浏览器渲染首帧时强行插值，结果就是那一下突兀的动画。
- 别在
:hover或.active里写transition——它必须始终存在，写在默认样式里 - 确保每个可过渡属性都有明确初始值：
opacity: 1、transform: translateY(0)、max-height: 0，不能留空或依赖auto - 用开发者工具「Computed」面板检查目标属性的当前值，如果是
auto、initial或空字符串，就是隐患点
用.preload类锁定初始状态
靠transition: none !important粗暴禁用会破坏交互逻辑，真正有效的是把初始渲染和后续过渡解耦。核心思路：先让元素以终态静默渲染，等页面就绪再启用过渡。
- 给
加preload类： - CSS中用
.card.preload强制设终态值：opacity: 1; transform: translateX(0); - 过渡规则只对非
preload状态生效：.card:not(.preload) { transition: opacity 0.3s, transform 0.3s; } - JS在
window.onload或DOMContentLoaded后移除preload：document.body.classList.remove('preload');
requestAnimationFrame延迟class切换有用吗
有用，但仅限于“时机”问题——它不能补救缺失的初始值。如果你已经写了opacity: 0和transition在基础样式里，requestAnimationFrame能确保浏览器拍下初始帧再应用终态类；如果初始值压根没声明，加再多层rAF也白搭。
- 正确用法：
el.classList.remove('hidden'); requestAnimationFrame(() => el.classList.add('show')); - 错误用法：
el.classList.add('show');（没初始值）→requestAnimationFrame(() => ...)（还是没初始值） - 别在
rAF回调里读getComputedStyle或offsetHeight，这会强制同步layout，反而打断过渡队列
为什么display: none + block切不出过渡效果
因为display不可动画，浏览器一设display: none就立刻从渲染树移除元素，transition连启动机会都没有。这不是过渡失效，是属性本身不参与插值。
- 替换方案：用
visibility: hidden; opacity: 0;+transition: opacity 0.3s, visibility 0s 0.3s; - 折叠展开别用
height: auto，改用max-height: 0→max-height: 500px（数值要够大，覆盖内容高度） - 位移优先选
transform，它GPU加速且不触发重排，比top/left更稳
最常被忽略的一点：过渡是否生效，不取决于你写了多少行transition，而取决于「浏览器首帧是否拿到了可插值的确定起点」。删掉所有!important，关掉重置CSS，回到基础选择器里老老实实写两行初始值，问题往往就没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
