我正在尝试使用 css 和 javascript 制作带有 div 的动画。我想让 div 中的所有内容在单击时在 6 秒内下降 800 像素。这是我到目前为止所拥有的。谢谢。
var firstVar = window.document.body;
function gone() {
document.getElementById("main").style.top = "800px";
}
firstVar.addEventListener("click", gone);#main {
position: relative;
transition: top 6s;
}<body>
<div id="main">
<h1>
<marquee class="bouncy" direction="down" width="1000" height="200" behavior="alternate" style="border: solid">
<marquee behavior="alternate" scrollamount="40">
Sean's Web App Space
</marquee>
</marquee>
</h1>
</div>
</body>最佳答案
只需添加 top: 0; 即可为其设置动画初始值。 auto 是默认值，您不能从 auto => 800px 设置动画，因此您需要提供初始值 0。
var firstVar = window.document.body;
function gone() {
document.getElementById("main").style.top = "800px";
}
firstVar.addEventListener("click", gone);#main {
position: relative;
top: 0;
transition: top 6s;
}<body>
<div id="main">
<h1>
<marquee class="bouncy" direction="down" width="1000" height="200" behavior="alternate" style="border: solid">
<marquee behavior="alternate" scrollamount="40">
Sean's Web App Space
</marquee>
</marquee>
</h1>
</div>
</body>关于javascript - 使用 CSS 更改 div 的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54374642/