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个项目，因此创建了三个tags：

<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>

加载多个div时应用动画

1 个答案: