添加类后CSS Transition未生效，如何实现元素2秒后平滑上滑？

这个坑我之前踩过！你遇到的过渡不生效问题，主要有两个核心原因：

1. 缺少明确的初始状态值 #

transition的工作原理是需要知道起始样式值和目标样式值，才能计算中间的过渡动画。你的#section2只设置了position:absolute，但没有定义初始的top属性——浏览器会用元素在文档流中的默认位置作为初始位置，但这个位置没有明确的数值（比如top:100vh），所以当你添加up类设置top:0时，浏览器无法计算过渡路径，直接跳变到目标样式。

2. 浏览器渲染优化导致状态合并 #

即使你设置了初始值，有时候浏览器会把setTimeout的回调操作和初始渲染合并成一次重绘，跳过过渡动画的计算。这时候需要强制浏览器先完成当前布局的计算，再执行类的添加操作。

修复后的完整代码 #

CSS部分

html * { transition: 1s all; }
body { overflow: hidden; }
#section1 { background: steelblue; }
#section2 { 
  background: indigo; 
  position: absolute; 
  top: 100vh; /* 明确初始位置：视口正下方 */
}
section { width: 100%; height: 100vh; }
.up { top: 0px; }

JavaScript部分（两种可选方案）

方案一：强制触发布局计算

var s2 = document.querySelector("#section2");
setTimeout(() => {
  // 读取offsetTop强制浏览器计算当前布局，记录初始状态
  void s2.offsetTop;
  s2.classList.add("up");
}, 2000);

方案二：用requestAnimationFrame确保重绘时机

var s2 = document.querySelector("#section2");
setTimeout(() => {
  // 让类的添加操作在浏览器下一次重绘前执行，确保初始状态已渲染
  requestAnimationFrame(() => {
    s2.classList.add("up");
  });
}, 2000);

为什么这样能解决问题？ #

• 给#section2设置top:100vh，明确了动画的起始位置，让transition有了可计算的起点和终点（从视口下方滑到顶部）。
• 强制布局计算或使用requestAnimationFrame，是告诉浏览器“先处理完当前的渲染，再执行动画操作”，避免浏览器合并状态导致过渡被跳过。

这样修改后，你就能看到section2平滑上滑到窗口顶部的效果了！

内容的提问来源于stack exchange，提问作者Julio Rodriguez