transition在appendchild后不生效是因为dom插入与样式计算同步，导致过渡起始快照缺失；正确做法是将transition声明在基础类中、确保起始值明确可插值，并通过offsetwidth等触发重绘时机。
transition为什么在appendChild后不生效
根本不是CSS写错了，而是元素“没来得及上车”——浏览器把DOM插入和样式计算压在同一帧里，transition需要的“起始快照”根本没机会生成。典型现象是新元素直接啪一下显示出来，DevTools里Computed面板里transition显示为none或0s。
- 先
appendChild再classList.add：元素已渲染完毕，浏览器跳过过渡初始化 - 用
el.style.transition = "opacity 0.3s"动态赋值：晚于首次layout，无效 - 基础类没声明初始值（比如只写
.fade { transition: opacity 0.3s; }，没写opacity: 0;）：浏览器取默认opacity: 1，变化量为0 - Vue scoped样式下JS直接append的节点没带
data-v-xxxx属性：CSS选择器匹配不上
必须把transition写在基础类里，而不是切换类里
很多人把transition塞进.show这种功能类里，一删这个类，transition就没了，后续加.hide时浏览器根本没上下文可过渡。transition必须长期存在，不能随状态开关而消失。
- ✅ 正确：
.box { opacity: 0; transition: opacity 0.3s ease; }+.box.active { opacity: 1; } - ❌ 错误：
.box { opacity: 0; }+.box.active { opacity: 1; transition: opacity 0.3s ease; } - UnoCSS/Windi CSS用户注意：
transition-opacity和duration-300必须同时存在，否则生成的CSS里transition字段为空 - 父元素设了
transform: translateZ(0)或will-change: transform可能截断子元素过渡（尤其Safari）
强制重绘或requestAnimationFrame的正确用法
void el.offsetWidth和requestAnimationFrame不是万能钥匙，它们只解决“时机”，不补“起点缺失”。用错位置反而会打断动画队列。
- 必须在加class前触发重绘：
el.classList.remove("collapsed"); void el.offsetWidth; el.classList.add("expanded"); -
offsetWidth最稳妥；clientWidth/scrollHeight不一定触发layout -
requestAnimationFrame写法：el.classList.remove("hidden"); requestAnimationFrame(() => el.classList.add("show"));—— 但别在里面读getComputedStyle或offsetHeight - 不要循环调用
offsetWidth，单次动画一次就够了，否则引发layout thrashing
sticky元素或height:auto场景下的特殊处理
height从auto变到具体数值（如100px）永远无法过渡，因为auto不是可插值的数值。同理，display: none切到block也完全不走transition。
- 替代方案：用
max-height代替height，初始设max-height: 0;，终态设足够大的值（如max-height: 500px;） - sticky元素需固化初始高度：DOM挂载后立即读
el.offsetHeight，然后写死height: xxxpx;再加transition - 想隐藏又过渡？用
visibility: hidden; opacity: 0;+transition: opacity 0.3s;，别碰display - 检查Computed面板里
transition-property是否真为opacity，而不是all或none
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
