title: Animating AJAX loaded posts
body: <p>I have a testimonials page where I have created a load more button that loads two more posts until max posts is reached then the button disappears. Now what I'm struggling with is I want the posts to animate in when they load in. I have tried to do this using for each and selecting the post class and adding the animation. But the issue seems to be that both the post class and the animation class are added at the exact time (or close enough) resulting in no animation at all. This is because the post class is also injected by my js. </p>
  
  <p>Here's my code to give you a better understanding;</p>
  
  <h1>JS</h1>
  
  <pre><code>jQuery('#more:not(.loading)').click(function(){
      var page = jQuery(this).data('page');
      var new_page = page+1;
      var current = jQuery(this);
  
      current.addClass('loading');
  
      $.ajax({
          url : ajax.ajax_url,
          type : 'post',
          dataType : 'json',
          data : {
              page : page,
              action : 'load_more'
          },
          error : function(response){
              console.log(response);
          },
          success : function( response ){
              current.data('page', new_page);
  
              for(var i = 0; i &lt; response.post_cont.length; i++){
                  var html =''+
                      '&lt;div class="col-md-9 testimonial_post"&gt;'+
                              '&lt;div class="row"&gt;'+
                                  '&lt;div class="col-md-10 offset-md-1"&gt;'+
                                      '&lt;p class="name"&gt;'+ response.post_cont[i].name +'&lt;/p&gt;'+
                                      '&lt;p class="location"&gt;'+ response.post_cont[i].area +'&lt;/p&gt;'+
                                  '&lt;/div&gt;'+
                              '&lt;/div&gt;'+
  
                              '&lt;div class="row"&gt;'+
                                  '&lt;div class="col-md-1 p-0"&gt;'+
                                      '&lt;img src="http://domain.co.uk/wp-content/themes/dist/imgs/quotation.svg" class="left_quotation" alt="quotation mark image"&gt;'+
                                  '&lt;/div&gt;'+
  
                                  '&lt;div class="col-md-10"&gt;'+
                                      '&lt;p class="testimonial"&gt;'+ response.post_cont[i].review +'&lt;/p&gt;'+        
                                  '&lt;/div&gt;'+
  
                                  '&lt;div class="col-md-1 p-0"&gt;'+
                                      '&lt;img src="http://domain.co.uk/wp-content/themes/dist/imgs/quotation.svg" class="right_quotation" alt="quotation mark image"&gt;'+
                                  '&lt;/div&gt;'+
                              '&lt;/div&gt;'+
                              '&lt;hr&gt;'+
                          '&lt;/div&gt;';
  
                  jQuery('#testimonial_container').append(html);
              }
  
              jQuery('.testimonial_post').each(function(){
                  jQuery(this).addClass('reveal');
              });
  
              current.removeClass('loading');
  
              if( jQuery('.testimonial_post').length &gt;= response.max_posts[0].no_of_posts){
                  current.hide();
              }
  
          }
      });
  });
  </code></pre>
  
  <h1>PHP</h1>
  
  <pre><code>&lt;?php
      add_action('wp_ajax_nopriv_load_more', 'load_more');
      add_action('wp_ajax_load_more', 'load_more');
  
      function load_more(){
  
          $paged = $_POST["page"]+1;
  
          $args = array(
              'post_type'         =&gt; 'customer_testimonial',
              'posts_per_page'    =&gt; 2,
              'paged'             =&gt; $paged,
              'orderby'           =&gt; 'date'
          );
  
          $query = new WP_Query( $args );
  
          $no_of_posts = $query-&gt;found_posts;
  
          if( $query-&gt;have_posts() ):
              while( $query-&gt;have_posts() ): $query-&gt;the_post(); 
                  $post_cont[] = array(
                      "name"  =&gt;  get_field('customer_name'),
                      "area"  =&gt;  get_field('area'),
                      "review"    =&gt; get_field('review')
                  );
              endwhile; 
          endif;
  
          $max_posts[] = array(
              "no_of_posts"   =&gt; $no_of_posts
          );
          echo json_encode(array( "post_cont" =&gt; $post_cont, "max_posts" =&gt; $max_posts));
          wp_reset_postdata();
          die();
      }
  ?&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>.testimonial_post{
  
      -webkit-transition: all 3s;
          -o-transition: all 3s;
          transition: all 3s;
          -webkit-transform: translateY(100px);
          -ms-transform: translateY(100px);
          -o-transform: translateY(100px);
          transform: translateY(100px);
          opacity: 0;
  
          &amp;.reveal{
              -webkit-transform: translateY(0px);
              -ms-transform: translateY(0px);
              -o-transform: translateY(0px);
              transform: translateY(0px);
              opacity: 1;
          }
  }
  </code></pre>
  
  <p>As you can see I target the .testimonial_post class and add the reveal class but both of these are added at the same time, resulting in no animation. How can I work around this? </p>