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