元素初次无过渡因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');