Как отложить запуск анимации JS? - PullRequest
0 голосов
/ 01 мая 2020

Мне было интересно, есть ли простой способ отложить запуск анимации anime.timeline? У меня есть предварительный загрузчик на моем сайте, поэтому я не хочу, чтобы эта анимация запускалась до тех пор, пока предварительный загрузчик не исчезнет, ​​то есть через 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. Спасибо!

Ответы [ 2 ]

0 голосов
/ 01 мая 2020

Вы пытались установить время ожидания до запуска анимации?

var animation = function(){
    setTimeout(check, 1000); 
}
animation();
0 голосов
/ 01 мая 2020

Вы можете использовать setTimeout () Method

<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 секунды.

...