javascript - 在加载多个 div 时应用动画

Question

我想在加载 div 时使用 css 或 JQuery 应用动画。

div 以这种方式加载:

<div>
    <blog_topic_title each="{item , i in data.blogTopicsArr}" index={i} id={item.article_id} topic={item}></blog_topic_title>
</div>

数据:

this.data.blogTopicsArr = [1,2,3];

在页面加载时，我们看到数组中有 3 个元素，因此创建了三个 标签，如下所示:

<blog_topic_title>{opts.topic}</<blog_topic_title>
<blog_topic_title>{opts.topic}</<blog_topic_title>
<blog_topic_title>{opts.topic}</<blog_topic_title>

虽然上述三个 div 是在循环内创建的，但我想在循环时使用 css 或 JQuery 传递一些动画，所以它看起来像这样: https://codepen.io/elmahdim/pen/sGkvH或者可能是类似的东西。

我尝试使用过渡来应用 css 动画，但无法像链接中那样获得效果。

Answer 1

You can use **[wow.js][1]** for this purpose.

  [1]: http://mynameismatthieu.com/WOW/

<blog_topic_title  class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">{opts.topic}</<blog_topic_title>
<blog_topic_title  class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">{opts.topic}</<blog_topic_title>
<blog_topic_title class="wow bounceInUp">{opts.topic}</<blog_topic_title>