需求是当这个元素退出动画结束后,将该元素删除,相当于一个队列的形式,下面添加新的元素,上面删除旧的元素
demo如下:
<ul class="test"></ul>
$(function(){
var i = 0;
$(document).click(function(){
var str = "<li class='fade-in-bottom'>"+i+"</li>"
$(".test").append(str);
if($(".test").find("li").length > 3){
$(".test").find("li").eq(i-3).addClass("fade-out-top");
}
i++;
})
})
.fade-in-bottom {
-webkit-animation: fade-in-bottom 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in-bottom 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.fade-out-top {
-webkit-animation: fade-out-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: fade-out-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes fade-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0;
}
}
@keyframes fade-in-bottom {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}