javascript - 如何使用 vanilla JS 为 wordpress 主题中的每篇文章增加动画延迟

Question

我有一个 php 循环来显示 wordpress 主题的存档类别页面上的帖子。我还创建了一个动画，在 .2 秒内将帖子从 opacity=o 变为 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 了。

提前致谢。

Answer 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; ?>