javascript - 如何在js中制作连续打开动画

Question

如何在html,css,js中制作一个很酷很简单的开场动画

我已经尝试过了，但这没有用：-

html代码

<div class="Anim">
   <div>Header</div>
</div>

CSS代码： -

.Anim {
   position: absolute;
   top: -100px;
   left: 0;
   width: 100%;
   height: 100px;
   background: purple;
   color: red;
   text-align: center;
   font-size: 50px;
   border: 3px solid lime;
}

Javascript代码：-

function anim() {
   let elem = document.querySelector('.Anim');
   let y = -100;
   setTimeout(inner(),1000);

   function inner() {
      if(y == 0) {
          return;
      }
      else {
          y++;
          elem.style.top = y + 'px';
          setTimeout(inner(),1000);
      }
   }
}

anim();

他们是解决此问题并使其正常工作的一种方法，如果有请告诉我。

提前谢谢你

标签： javascripthtmljqueryanimation

Answer 1

您应该删除括号setTimeout(inner(), 1000)

function anim() {
   let elem = document.querySelector('.Anim');
   let y = -100;
   setTimeout(inner ,1000);

   function inner() {
      if(y == 0) {
          return;
      }
      else {
          y++;
          elem.style.top = y + 'px';
          setTimeout(inner(),1000);
      }
   }
}

anim();

还有一种更有效的方法是使用@keyframes