滑らかなアニメーション(アニメーションのCSS3の実現)を達成するために、ボトムアップから自分

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

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>

ここに画像を挿入説明

公開された151元の記事 ウォン称賛7 ビュー7484

おすすめ

転載: blog.csdn.net/qq_43923045/article/details/104674711