Как постепенно увеличить задержку анимации с помощью vanilla JS для каждого поста в теме WordPress

Question

У меня есть цикл php для показа сообщений на странице категории архива в теме WordPress.Я также создал анимацию, которая переводит сообщение из opacity = o в opacity = 1 в .2s.Я хочу увеличить задержку анимации для каждого дополнительного сообщения, чтобы первое сообщение в списке появилось за несколько миллисекунд до следующего сообщения.Я уже выполнил это, используя: nth-of-type (n) для максимального пост-предела 15. Я знаю, что это крайне неэффективно и хотел бы использовать (цикл?) JavaScript для обработки задержки анимации с возрастающим увеличением времени.

@keyframes fade-in {
100% {
    opacity: 1;
    transform: translate(0, 0);
     }
}
#section-grid a:nth-of-type(1) {
    animation: fade-in .2s 0s forwards ease-out;
}

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <a href="<?php the_permalink(); ?>">
         <div>
            <img src="<?php the_field('feature_image2'); ?>" alt="plant">
               <aside>
                   <?php the_title(); ?>
               </aside>
         </div>
      </a>

      <?php endwhile; else: ?>
          <div class="page-header">
               <h1>Coming Soon</h1>
          </div>
          <p>If there is nothing here that doesn't mean nothing is coming. Stay tuned for updates and new information.</p>
      <?php endif; ?>

Я бы хотел, чтобы задержка анимации увеличивалась на 0,05 с для каждого нового сообщения на странице архива.Затем я смогу удалить: nth-of-type из моего CSS.

Заранее спасибо.

Answer 1

Я бы предложил использовать для этого библиотеку JavaScript.

https://greensock.com/docs/TimelineMax/staggerTo

var elements = document.querySelectorAll('.js-animate');

TweenMax.staggerTo(elements, 0.2, {
    autoAlpha: 1
}, 0.1);

Пример: https://jsfiddle.net/qgkah26v/3/

Answer 2

Вы можете использовать встроенный CSS следующим образом (задержка здесь в миллисекундах):

#section-grid a:nth-of-type(1) {
    animation: fade-in .2s 0s forwards ease-out;
}

<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
$last_anim=0;
?>
      <a href="<?php the_permalink(); ?>" style="animation:fade-in .2s .<?php echo $last_anim; ?>ms forwards ease-out;">
         <div>
            <img src="<?php the_field('feature_image2'); ?>" alt="plant">
               <aside>
                   <?php the_title();
                   $last_anim+=500;
                   ?>
               </aside>
         </div>
      </a>

      <?php endwhile; else: ?>
          <div class="page-header">
               <h1>Coming Soon</h1>
          </div>
          <p>If there is nothing here that doesn't mean nothing is coming. Stay tuned for updates and new information.</p>
      <?php endif; ?>