Is there a way to create a seamless effect when removing an element? I am looking to incorporate a transition or slide effect when deleting a block and causing the blocks below it to move up smoothly.
const animateCSS = (element, animation, prefix = 'animate__') => {
// Creating a Promise and returning it
return new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
// Removing classes and resolving the Promise after animation ends
function handleAnimationEnd(event) {
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
});
}
function delete_comment(id_comment){
console.log(id_comment);
animateCSS('#comment_'+id_comment, 'fadeOut').then((message) => {
$('#comment_'+id_comment).remove();
// Sliding the remaining block
});
}
$( document ).ready(function() {
$( ".comment_tools" ).on( "click", function() {
var get_id = this.id;
delete_comment(get_id)
});
});.comment_block{
transition: all 1s;
width: 100%;
padding: 10px;
display: inline-flex;
margin-bottom: 5px;
background: green;
}
.comment_profil_section{
width: 15%;
}
.comment_content_section{
width: 85%;
padding-left: 10px;
}
.comment_header{
text-align: left
}
.comment_datetime{
display: block;
font-size: 12px;
color: #FFFFFF;
margin-top: -2px;
margin-bottom: 10px;
}
.comment_message{
text-align: left
}
.comment_user_picture{
border-radius: 50%;
}
.comment_user{
font-weight: 400
}
.comment_tools{
float: right;
}
.comment_tools > .fa-pen{
margin-right: 25px;
color: #57CBCC;
cursor: pointer;
}
.comment_tools > .fa-minus-circle{
color: #CC5857;
cursor: pointer;
}
.comment_tools > .fa-check{
color: #57CBCC;
cursor: pointer;
margin-right: 25px;
}
.comment_tools > .fa-times{
color: #CC5857;
cursor: pointer;
}
.loader_comment_block{
position: absolute;
right: 30px;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<div id="comment_section" style="text-align: center" class="col-md-4 mx-auto">
<div id="comment_101" class="comment_block">
<div class="loader_comment_block" id="loader_comment_block_101">
<div class="loader-2 center"><span></span></div>
</div>
<div class="comment_profil_section"><img width="40" height="40" class="comment_user_picture" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"></div>
<div class="comment_content_section">
<div class="comment_header"><span class="comment_user">USER</span><span class="comment_datetime">10/02/2021 at 15:53</span></div>
<div class="comment_message">AAA</div>
<div id="101" class="comment_tools">DELETE</div>
</div>
</div>
(Other comment blocks omitted for brevity)
</div>