css - 添加类时，应用样式时没有平滑过渡

Question

我想要一个元素在 2 秒后以平滑的方式应用一些样式。我尝试了 setTimeout，在两秒后添加类，但是尽管声明了 transition: all 1s 绝对所有内容，当添加类(包含新样式)时，我看不到任何“转换"，新样式只是应用而没有平滑度。

我该如何解决？

var s2 = document.querySelector("#section2");
setTimeout(() => {
  s2.classList.add("up");
}, 2000);

html * {
  transition: 1s all;
}

body {
  overflow: hidden;
}

#section1 {
  background: steelblue;
}

#section2 {
  background: indigo;
  position: absolute;
}

section {
  width: 100%;
  height: 100vh;
}

.up {
  top: 0px;
}

<section id="section1"></section>
<section id="section2"></section>

我想要实现的是第一个下方的 div 开始向上移动，直到到达窗口顶部，就像“向上滑动”效果一样。为什么在添加包含此新样式的类后忽略“过渡”属性？

Answer 1

您需要为 top 规则应用初始值以允许转换生效。

var s2 = document.querySelector("#section2");
setTimeout(() => {
  s2.classList.add("up");
}, 2000);

html * {
  transition: 1s all;
}

body {
  overflow: hidden;
  position: relative; /** ensure section#section2 is positioned relative to the body **/
}

#section1 {
  background: steelblue;
}

#section2 {
  background: indigo;
  position: absolute;
  top: 100vh; /** initial value **/
}

section {
  width: 100%;
  height: 100vh;
}

/** #section2.up is more specific **/
#section2.up {
  top: 0;
}

<section id="section1"></section>
<section id="section2"></section>