动画化AJAX加载的帖子

Question

我在个人鉴定页上创建了“加载更多”按钮，该按钮可再加载两个帖子，直到达到最大帖子数，然后该按钮消失。现在，我正在努力的是我希望帖子在加载时进行动画处理。我尝试针对每个帖子使用动画，并选择帖子类并添加动画。但是问题似乎是在准确的时间（或足够接近）添加了post类和animation类，导致根本没有动画。这是因为post类也是由我的js注入的。

这是我的代码，可以帮助您更好地理解；

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

如您所见，我以.testimonial_post类为目标并添加了揭示类，但是这两个都是同时添加的，因此没有动画。我该如何解决？

Answer 1

首先添加div以进行如下所示的加载，并在其上设置动画或不透明度并设置样式以使其不显示：

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

然后您应该在ajax代码中使用Ajaxstart和Ajaxcomplete，如下所示：

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