I want to animate it smoothly when I delete vertical stacking elements and it falls down.

If the animation sliding from side to side is what you expect, the vertical motion should be the same as the horizontal motion, and you should be able to animate up and down by putting the appropriate value in transitionY.
Also, if you want to remove the snack bar that disappeared off the screen from DOM, you will need to know when the animation is over.

I'm not sure how it's actually implemented because there's no code in the questionnaire, but a relatively easy way to do this is to:

• Set the snack bar position to fixed
• Adjust the positional relationship with left bottom
Use
• setTimeout to delay running the animation that slides and the animation that lowers the remaining snack bar on the screen

I think that's the policy.

We have created a sample with codepen for your reference.There are probably many differences from your current implementation, but it should be helpful as one of the implementation examples.

varsnackbar_stack=[];// Array of snack bars on the screen
var SNACKBAR_MAX=3;// Maximum number of snackbars that can be placed on the screen
var SNACKBAR_HEIGHT=50;// Snackbar height value
var snapbar_area= document.querySelector('div.snackbar-area');

function add_snackbar(){
  let sb = document.querySelector('#snackbar-template').content.cloneNode(true);
  letouter=sb.querySelector('.snackbar-outer');
  // console.log(outer);
  let shiftbar = null; // Node of the snack bar that will be kicked out if the maximum number of snack bars is added
  let idx = snackbar_stack.push(outer)-1; // idx is where the snack bar is inserted
  if(snackbar_stack.length>SNACKBAR_MAX){
    // If more than the maximum number of snack bars are pushed, take out the lead.
    shiftbar=snackbar_stack.shift();
  }
  // console.log (shiftbar);
  // Add Snack Bar to DOM
  snapbar_area.appendChild(sb);
  // Initial Y position of the snack bar to be added.
  outer.style.bottom=`${idx*SNACKBAR_HEIGHT}px`;
  // SetTimeout specifies the X position of the snack bar to be added and the snack bar to be kicked out.
  // This enables transition (delay 0 is OK).
  setTimeout(()=>{
    // Slide out
    if(shiftbar){
      shiftbar.style.left='-500px';
    }
    // Those who are going to slide in?
    outer.style.left=`0px`;
  },0);

  // Slide in the snack bar, slide out the rest of the snack bar after the animation ends.
  // Slide downward.Set the delay value to the same number of seconds as the transition-duration specified in transition.
  // The transition is also valid.
  setTimeout() = > {
    // If you remove the slide-out snack bar from the DOM at this time, the display will not be affected.
    if(shiftbar){
      shiftbar.remove();
    }
    // Reset the Y direction for each snack bar.
    snackbar_stack.forEach(e,i)=>e.style.bottom=`${i*SNACKBAR_HEIGHT}px`);
  }, 300);
}

.snackbar-outer{
  /* Position is fixed on a screen basis*
  position:fixed;
  display:flex;
  justify-content:center;
  align-items:center;
  margin —5px;
  /* Specify width, height */
  width —200px;
  height —40px;
  /* Initial insertion position (X direction)*/
  left: -300px;
  /* The initial position in the Y direction depends on the situation, so the initial value is appropriate */
  bottom:0;
  background-color:#333;
  color:#dd;
  border-radius:5px;
  box-shadow —2px2px5px1px#00000080;
  /* If you set the function to ease-in relatively early, the effect will be like falling lightly by gravity*/
  transition —all.3ase-in;  
  .snackbar-inner{
    width: 100%;
    text-align:center;
  }
}

<button id="add-snackbar" onclick="add_snackbar()">add snackbar</button>

<!--- Any element to place the snackbar is fine.Only the contents will be fixed. -->
<div class="snackbar-area"></div>

<template id="snackbar-template">
  <div class="snackbar-outer">
    <div class="snackbar-inner">notification.</div>
  </div>
</template>