CSS定义动画效果
<style>
.fade-enter-active{
animation: dropdown 2s;
}
@keyframes dropdown {
30% {
-moz-transform:scaleY(-0.3);
-webkit-transform:scaleY(-0.3);
-o-transform:scaleY(-0.3);
transform:scaleY(-0.3);
!*IE*!
filter:FlipV;
}
100% {
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
!*IE*!
filter:FlipV;
}
}
</style>
JS部分，动态添加文字条数，定时为每行文字添加有动画效果的class名
<script>
var myarray=
[
{ text:"湘潭供电本部在本地区成功下单",
time:"2017-1-20"
},
{ text:"湘潭供电本部在本地区成功下单2",
time:"2017-1-20"
},
{ text:"湘潭供电本部在本地区成功下单3",
time:"2017-1-20"
},
{ text:"湘潭供电本部在本地区成功下单4",
time:"2017-1-20"
},
{ text:"湘潭供电本部在本地区成功下单5",
time:"2017-1-20"
}
]
;
$(function () {
myajax();
function myajax() {
/*页面初始化*/
var tranxinx=$(".tranxinx");
for( yy of myarray){
tranxinx.append("<p style='color:#44A5E3;font-size:12px;'><span style='text-align:left;'>"+yy.text+"</span><span style='float:right;'>"+yy.time+"</span></p>");
};
var myindex=0;
function intervalInner() {
console.log(myindex);
myanimation();
}
var mysetInterval=setInterval(function()
{
intervalInner();
},1000);
function myanimation() {
if(myindex<myarray.length){
$(".tranxinx").children('p').eq(myindex).addClass('fade-enter-active').siblings('p').removeClass('fade-enter-active');
myindex=myindex+1;
}else{
/*------一组动画结束后，重新调用ajax更新数据以下--------*/
clearInterval(mysetInterval);
$(".tranxinx").empty();
myajax();
/*------一组动画结束后，重新调用ajax更新数据以上--------*/
}
};
}
})
</script>
HTML结构
<body>
<div class="tranxinx">
</div>
</body>
1524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
