when adding a class, styles are applied without smooth transition - css

Question

I want an element to get applied some styles in a smooth way after 2 seconds. I tried setTimeout, to add the class after two seconds, but despite having declared transition: all 1s to absolutely everything, when the class (containing new styles )is added, I can't see any "transition", the new styles are just applied without smoothness.
How can I fix it?
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>
What I want to achieve is that the div that is below the first one start moving up until it reaches the top of the window, like a "slide-up" effect. Why are "transition" property being ignored after adding the class containing this new styles?

Answer 1

You need to apply an initial value for the top rule to allow the transition to take effect.
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>

Answer 2

You can also animate with an external library like jQuery:
$("#section2").animate({
top: 0,
duration: 2000
});
html * {
transition: 1s all;
}
body {
overflow: hidden;
}
#section1 {
background: steelblue;
}
#section2 {
background: indigo;
position: absolute;
}
section {
width: 100%;
height: 100vh;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<section id="section1"></section>
<section id="section2"></section>