元素初次无过渡因transition需明确起止状态；须设初始值如opacity:0/transform，transition写在初始类中，禁用display，改用visibility+opacity，并强制offsetHeight触发布局。
元素初次进入页面时没有过渡效果，是因为 transition 只在元素已有样式和目标样式之间发生变化时才生效；而初始渲染时，元素从“无”到“有”的过程不触发 CSS 属性的渐变变化，浏览器不会自动补全起始状态。
确保 transition 作用的属性有明确的初始值
很多情况下，元素刚插入 DOM 时，某些 CSS 属性（如 opacity、transform、height）没有显式声明初始值，导致 transition 找不到“起点”。必须手动设置一个可过渡的起始状态：
- 给元素默认加 opacity: 0; 和 transform: translateY(20px);
- 再通过添加 class 切换为 opacity: 1; 和 transform: translateY(0);
- transition 必须写在**初始状态规则里**（即未添加 class 时的样式），而不是只写在目标 class 中
避免用 display: none / block 触发过渡
display 是不可过渡的属性。即使你写了 transition: display 0.3s;，也不会生效。正确做法是：
- 用 visibility: hidden; + opacity: 0; 代替 display: none;
- 过渡时只改 opacity 和 transform 等可动画属性
- 需要彻底隐藏交互时，可在 transition 结束后（例如监听 transitionend 事件）再设 display: none;
强制触发重排（Reflow）以启用 transition
有时 JS 动态插入元素后立即加 class，浏览器会合并渲染，跳过过渡。解决方法是在设置目标 class 前，**强制读取一次布局属性**（如 offsetHeight），让浏览器先完成初始渲染：
立即学习“前端免费学习笔记（深入）”；
- 插入元素后，先设置初始 class（如 .fade-enter）
- 紧接着执行 element.offsetHeight;（或 getComputedStyle(element).opacity）
- 再添加目标 class（如 .fade-enter-active）
推荐的 class 切换结构示例
以淡入+上滑为例：
.fade-enter {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-enter-active {
opacity: 1;
transform: translateY(0);
}
JS 中这样用：
element.classList.add('fade-enter');
element.offsetHeight; // 强制触发布局
element.classList.add('fade-enter-active'); 
