Estoy haciendo notificaciones para mi sitio web, pero cuando se eliminan una por una, simplemente se teletransportan a la parte superior, pero quiero que la transición entre ellas sea fluida. Lo que quiero decir con esto es que cuando la notificación se elimina, se "teletransporta" a la parte superior y no. simplemente ve sin problemas

mi código

html:

 <div class="notifications"> </div>

js:

 var notification_max = 5; function notification(title, content, type){ if(document.querySelectorAll('.notification').length > 5) return function icon(){ if(type == 'error') return '<i class="fal fa-exclamation-triangle"></i>' if(type == 'message') return '<i class="fas fa-comment-alt-dots"></i>' } var htmlContent = ` <div class="icon"> ${icon()} </div> <div class="text"> <div class="title">${title}</div> <div class="content">${content}</div> </div> ` var newNotification = document.createElement('div') newNotification.classList = "notification" newNotification.innerHTML = htmlContent document.querySelector(".notifications").appendChild(newNotification) window.setTimeout(()=>{ document.querySelector(".notifications").removeChild(newNotification) },2000) } notification("Title", "Content", "error")

aquí hay un enlace a codepen si puede ayudar: ENLACE