Allow customizing slide up/down animation

[viveleroi]

I need to delay toasts sliding into a position occupied by an exiting toast long enough to not cover the "exiting" toast, yet not delay those toasts from sliding to make room for new toasts.

Using the ToastBar animation approach in the docs, I'm animating a "slide in" and "slide out" effect for the toasts. They slide in from, and out to the right of the screen.

However, I've noticed that when a toast is being removed, the other toasts move into it's place immediately. In reality, they should wait until the "closing" toast animation is done and then slide up or down into position.

I'm not seeing any documentation on how to customize it. I'm hoping I can just tweak the animation used for sliding up so that the delay matches the slide out animation length.

chrome_FjBudhZTJy.mp4

(I slowed down the animation speed so you can see the issue clearly)

Looking into this further, it seems like the slide is handled by the transition on the parent element. I can change of course, but I can't change it to only affect the slide up - it effects all transitions. I'd need a class or something applied only when the notification is sliding up.

For example I can get my slide up transition to wait properly with this css on the Toaster containerStyle: transition: all 300ms cubic-bezier(0.04, 0.8, 0.2, 0.97) 1s

Except that breaks slide in/out animations because it's always applied, not just when sliding up.

I have been trying even more approaches, including adding a class name to the element when the entrance animation has ended so that the class will only affect future animations. While it appeared to solve my problem, it also affects toasts sliding to make room for new ones.

const onAnimationEnd = (event: AnimationEvent<HTMLDivElement>) => {
  const { target } = event
  if (target instanceof HTMLElement) {
    target.parentElement?.classList.add(styles.entranceCompleted)
  }
}