複数の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 tagsは次のように作成された配列の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> 

上記の3つのdivはループ内に作成されていますが、 https://codepen.io/elmahdim/pen/sGkvHまたは類似のいくつかのものになることがあります。それは次のようになりますので、ループしながら、CSSやjQueryのを使用してアニメーション。

私はトランジションを使用して、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>