Usted mismo de la parte inferior hacia arriba para conseguir una animación suave (realización css3 de animación)

<style>
        .post-list-row{
            animation: post-list-row .9s;
            -webkit-animation: post-list-row .9s;
        }
        /*自定义动画*/
        @keyframes post-list-row {
            0% {
                opacity: 0;
                -webkit-transform: translateY(40px);
                transform: translateY(40px);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0) scale(.9);
            }
        }
        @-webkit-keyframes post-list-row {
            0% {
                opacity: 0;
                -webkit-transform: translateY(40px);
                transform: translateY(40px);
            }
            100% {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0) scale(.9);
            }
        }
        
    </style>

prestación js

<!--滑动动画-->
<script async>
    $(document).ready(function () {
        $('#pagination a').click(function () {
            console.log("被点击了");
            let row = $('.container .row').first().clone();
            let container = $('.container');
            row.addClass('post-list-row');
            container.append(row);

        });
    })
</script>

Aquí Insertar imagen Descripción

Publicados 151 artículos originales · ganado elogios 7 · vistas 7484

Supongo que te gusta

Origin blog.csdn.net/qq_43923045/article/details/104674711
Recomendado
Clasificación