jQuery как добавить событие remove после CSS анимации? При клике на элемент происходит анимация и после неё удаление из DOM Скрипт запускает @keyframes анимацию:
$('#base').on('click', '.block', function(e) {
e.preventDefault;
$(this).toggleClass('block_animation');
});
как добавить:
$(this).remove();
$('#base').on('click', '.block', function(e) {
e.preventDefault;
$(this).toggleClass('block_animation');
});
.block {
padding: 100px;
position: relative;
display: inline-block;
background-color: #da22149c;
cursor: pointer;
animation-duration: 0.5s;
}
.block_animation {
animation-name: styles;
}
@keyframes styles {
0% {
opacity: 1;
left: 0;
}
100% {
opacity: 0;
left: 100;
}
}
<head>
<meta charset="utf-8">
<title>blocks</title>
</head>
<body bgcolor="#FFEFD5">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="base">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
</body>