添加类时，应用样式时不需要平滑转换。
添加类时，应用样式时不需要平滑转换。
提问于 2019-08-09 15:57:51
我想要一个元素在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开始向上移动，直到它到达窗口的顶部，就像一个“滑动向上”的效果。为什么在添加包含此新样式的类后忽略"transition“属性？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-09 16:39:50
您需要为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>
Stack Overflow用户
发布于 2019-08-09 16:23:05
您还可以使用外部库(如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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57433615
复制相关文章
相似问题
腾讯云开发者
