Question

我正在尝试使用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>

Answer 1

只需添加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>

Answer 2

我认为它是这样的：

页面加载并且CSS规则立即运行。
您的Javascript会在您每次点击时运行。 CSS规则不执行任何操作，因为页面上的类/ id /元素没有更改。

解决方案：单击时，将新类添加到元素-这将触发CSS重新渲染。该新类应具有以下CSS规则：

top: 800px;
transition: top 6s;

使用CSS更改div的位置

2 个答案: