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