如何判断一个元素animation 动画结束

0 0 css javascript
■-落小兮
■-落小兮

声望值:140 0人

2019-01-11 15:55:05 提问

关注 0关注

收藏 0收藏, 84浏览

需求是当这个元素退出动画结束后,将该元素删除,相当于一个队列的形式,下面添加新的元素,上面删除旧的元素
demo如下:

$(function(){

var i = 0;
$(document).click(function(){
    var str = ""+i+""
   
    $(".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;
}

}

请先 登录 后评论

2个回答

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问