Animating AJAX loaded posts

Question

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.

Here's my code to give you a better understanding;

JS

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 < response.post_cont.length; i++){
                var html =''+
                    '<div class="col-md-9 testimonial_post">'+
                            '<div class="row">'+
                                '<div class="col-md-10 offset-md-1">'+
                                    '<p class="name">'+ response.post_cont[i].name +'</p>'+
                                    '<p class="location">'+ response.post_cont[i].area +'</p>'+
                                '</div>'+
                            '</div>'+

                            '<div class="row">'+
                                '<div class="col-md-1 p-0">'+
                                    '<img src="http://domain.co.uk/wp-content/themes/dist/imgs/quotation.svg" class="left_quotation" alt="quotation mark image">'+
                                '</div>'+

                                '<div class="col-md-10">'+
                                    '<p class="testimonial">'+ response.post_cont[i].review +'</p>'+        
                                '</div>'+

                                '<div class="col-md-1 p-0">'+
                                    '<img src="http://domain.co.uk/wp-content/themes/dist/imgs/quotation.svg" class="right_quotation" alt="quotation mark image">'+
                                '</div>'+
                            '</div>'+
                            '<hr>'+
                        '</div>';

                jQuery('#testimonial_container').append(html);
            }

            jQuery('.testimonial_post').each(function(){
                jQuery(this).addClass('reveal');
            });

            current.removeClass('loading');

            if( jQuery('.testimonial_post').length >= response.max_posts[0].no_of_posts){
                current.hide();
            }

        }
    });
});

PHP

<?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'         => 'customer_testimonial',
            'posts_per_page'    => 2,
            'paged'             => $paged,
            'orderby'           => 'date'
        );

        $query = new WP_Query( $args );

        $no_of_posts = $query->found_posts;

        if( $query->have_posts() ):
            while( $query->have_posts() ): $query->the_post(); 
                $post_cont[] = array(
                    "name"  =>  get_field('customer_name'),
                    "area"  =>  get_field('area'),
                    "review"    => get_field('review')
                );
            endwhile; 
        endif;

        $max_posts[] = array(
            "no_of_posts"   => $no_of_posts
        );
        echo json_encode(array( "post_cont" => $post_cont, "max_posts" => $max_posts));
        wp_reset_postdata();
        die();
    }
?>

CSS

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

        &.reveal{
            -webkit-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px);
            opacity: 1;
        }
}

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?

Answer 1

first add div for loading like below and set animation or opacity on that one with style to display none:

<div class="loading" style="display:none">
    add animation css on this div and set disply:none
</div>

then you should use Ajaxstart and Ajaxcomplete in your ajax code as below:

$(document).ajaxStart(function(){
          $(".loading").css("display","block");
        });
        $(document).ajaxComplete(function(){
          $(".loading").css("display","none");
        });