如何延迟 JS animation 的启动？

Question

我想知道是否有一种简单的方法可以延迟这个动画的开始。时间线 animation？ 我的网站上有一个预加载器，所以我不希望这个 animation 触发，直到预加载器消失，也就是 2000 毫秒之后。

 <script> anime.timeline({loop: true}).add({ targets: '.ml3.letter', opacity: [0,1], easing: "easeInOutQuad", duration: 2250, delay: (el, i) => 150 * (i+1) }).add({ targets: '.ml3', opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 10000 }); </script>

我认为这是一个简单的解决方法，但我还是 JS 的新手。 谢谢！

Answer 1

你可以使用setTimeout() 方法

<script>
    setTimeout(function(){ 
     anime.timeline({loop: true})
       .add({
         targets: '.ml3 .letter',
         opacity: [0,1],
         easing: "easeInOutQuad",
         duration: 2250,
         delay: (el, i) => 150 * (i+1)
       }).add({
         targets: '.ml3',
         opacity: 0,
         duration: 1000,
         easing: "easeOutExpo",
         delay: 10000
       });
    }, 3000);
</script>

这将延迟 3 秒运行您的 function。

Answer 2

您是否尝试在 animation 开始之前设置超时？

var animation = function(){
    setTimeout(check, 1000); 
}
animation();