如何在wordpress主题中的每个帖子上使用Vanilla JS逐步增加动画延迟

我有一个php循环, 可在wordpress主题的存档类别页面上显示帖子。我还创建了一个动画, 将帖子从opacity = o转换为.2s中的opacity = 1。我想增加每个其他帖子的动画延迟, 以便列表中的第一个帖子在下一个帖子之前几毫秒出现。我已经使用：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秒。然后, 我可以从CSS中删除：nth-​​of-type。

提前致谢。

#1

你可以通过以下方式使用内联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; ?>

#2

我建议你为此使用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/