SOURCE

console 命令行工具 X clear

                    
>
console
$(function(){

    $("#ld").click(function(){
        var data = ['吴尊友称国内疫情不会再现小高峰', '吴尊友称国内疫情不会再现小高峰', '吴尊友称国内疫情不会再现小高峰', '吴尊友称国内疫情不会再现小高峰', '吴尊友称国内疫情不会再现小高峰', '吴尊友称国内疫情不会再现小高峰', '吴尊友称国内疫情不会再现小高峰', '吴尊友称国内疫情不会再现小高峰', '吴尊友称国内疫情不会再现小高峰', '吴尊友称国内疫情不会再现小高峰', '吴尊友称国内疫情不会再现小高峰', '吴尊友称国内疫情不会再现小高峰', '纽约"零号病人"首次发声', '特朗普与女记者僵持不下转身就走', '全国已有超1亿名学生复学', '赖弘国再回应与阿娇离婚'];
        var html = "";
        for (var i = 0, j = data.length; i < j; i++) {
            html+="<div class='item'><div class='tit'>"+data[i]+"</div></div>";
        }
        $(".list").html(html);
        anime({
            targets: '.list .item',
            translateY: [40, 0],
            opacity: [0, 1],
            delay: anime.stagger(40),  
            duration: 300,
            easing: 'cubicBezier(.7, .3, .2, .1)'
        })        
    })
    
    

})


<div class="list">
</div>

<button id="ld">加载数据</button>
*{margin: 0; padding: 0;}
body{
    background-color: #F5F5F5;
}

.list .item{
    transform: translateY(40px);
    opacity: 0;
    padding: 16px;
    background-color: #fff;
    border-bottom: 1px solid #ececec;
}
.list .item:last-child{
    border-bottom: 0;
}

本项目引用的自定义外部资源