如何在循环中使用 JavaScript 动画效果？

Question

我正在尝试使用 wow.js 添加 JavaScript 动画效果，所以我对其进行了初始化：

<head>
  <link rel="stylesheet" href="css/animate.css">
  <script src="js/wow.min.js"></script>
  <script>
     new WOW().init();
  </script>
</head>

然后我将 class 效果 (wow slideInRight) 放入我的 div:

<div class="row row-sm padder-lg ">

        <?php
        foreach ($top->tracks->track as $key => $value) 
        {
            if($key >= $this->config->item("items_top"))
                return false;
            $image = $value->image[3]->text;
                if($image == '')
            $image = $value->image[2]->text;
                if($image == '')
            $image = base_url()."assets/images/no-cover.png";
        ?>       
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <div class="item wow slideInRight">
                <img style="background:url('<?php echo $image; ?>')"/>  
            </div>
        </div>
        <?php
        }
        ?>
</div>

问题是 JavaScript 不是显示每个项目的效果，而是同时显示所有项目的效果。在循环中使用此 JavaScript 的正确方法是什么？

Answer 1

WOW.js 初始化应该放在 <body> 的末尾而不是 <head>，像这样：

   <script src="js/wow.min.js"></script>
   <script>
     new WOW().init();
   </script>
  </body>
</html>

除此之外，请记住当您在滚动时到达对象时 wowjs 开始动画，您的所有项目都在同一行所以在相同的高度，这是正确的动画一起开始。

如果你需要它们按顺序开始（即最左边的第一个，然后是其他的，直到你到达右边的最后一个）添加一个合适的 data-wow-delay="<number_of_seconds>s" 给你的 div，用和增加 number_of_seconds.

编辑：

您可以按照以下方式做一些事情：

<div class="row row-sm padder-lg ">

        <?php

        $delay=0;

        foreach ($top->tracks->track as $key => $value) 
        {
            if($key >= $this->config->item("items_top"))
                return false;
            $image = $value->image[3]->text;
                if($image == '')
            $image = $value->image[2]->text;
                if($image == '')
            $image = base_url()."assets/images/no-cover.png";
        ?>       
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <div class="item wow slideInRight" data-wow-delay="<?php echo $delay; ?>s">
                <img style="background:url('<?php echo $image; ?>')"/>  
            </div>
        </div>
        <?php
            $delay+=0.5;
        }
        ?>
</div>

这是您需要的吗？

如何在循环中使用 JavaScript 动画效果？

How to use a JavaScript animation effect inside a loop?

javascript

wow.js