html - 如果完全加载，如何在我的页面后使我的动画工作

Question

我希望我的页面文本从底部淡入，我正在使用https://animate.style来实现我的文本的淡入动画，但我只希望它在加载屏幕完全加载后 2 秒动画......首先我给了我的文本的元素 i 容器不显示，以免在我想要的时间显示它。然后我尝试使用jquerysetTimeInterveal()函数在超时后显示，但它只显示没有动画......下面是我试过的代码。

setInterval(() => {
  $("#landed").css("display", "block");
  $(".products").addClass("animate__fadeInUp animate__slow");
}, 2000);

#landed {
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="landing" id="landed">
  <!-- <span class="num-count num-1">1</span> -->
  <figure class="animate__animated soft">Softkodes</figure>
  <div class="product-contain">
    <h3 class="products animate__animated">
      We make Products that works
    </h3>

    <h6 class="lorem">
      We’re based in Nigeria but <br /> working worldwide, Partnering with local and international clients that value design just as much as we do
    </h6>
  </div>
  <div class="adds-service">
    <a href="#">Training</a>
    <a href="#">Design</a>
    <a href="#">Development</a>
  </div>
  <div class="arrow-down-wrap">
    <i class="line"></i>
    <i class="arrow-down"></i>
  </div>
</div>

我正在使用https://animate.style在时间间隔后添加动画，但它不起作用......它只显示块并且每个内容都显示没有动画......请任何有可能实现这一点的人。可以在 http://obys.agency 中找到一个示例...在此先感谢

标签： htmljquerycss

Answer 1

SetInterval 将每两秒重复一次你的函数。您应该使用 setTimeout 来延迟执行。

setTimeout(function(){
     $("#landed").css("display", "block");
      $(".products").addclass("animate__fadeInUp animate__slow");
},2000)

小提琴：https ://jsfiddle.net/sLko1bjp/

https://www.w3schools.com/jsref/met_win_settimeout.asp