如何在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();

他们有办法解决这个问题并让它发挥作用，如果有的话请告诉我。

提前谢谢

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

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

How to make continuos opening animation in js

html

javascript

jquery

animation