Im making notifications for my website but when they delete one by one it just teleports to the top, but i want it to smoothly transition between it, what i mean by this is when the notification deletes it is "teleporting" to the top and not just smoothly go to it

my code

html:

<div >
</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 ></i>'
    if(type == 'message') return '<i ></i>'
  }
  var htmlContent = `
      <div >
        ${icon()}
      </div>
      <div >
        <div >${title}</div>
        <div >${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")

here is link to codepen if it can help: LINK

CodePudding user response：

Maybe when removing a notification, you move it around before removing it (with CSS):

1. Move it off the screen to the left.
2. Move it up to be in line with the notification above it.
3. Remove it.

Then it will look like an animation.

I hope this works for you!