Allow customizing exit animation when user manually dismisses toast

[viveleroi]

I have customized the ToastBar per the docs so that we have a dismiss button. When a user clicks this button, our design team wants the toast to animate differently than it does when it's automatically dismissed.

I don't see any way to customize the animate when it's dismissed by clicking the button. I could probably wrap the entire toast bar in a new component and do a custom useState but am hoping there's another system I can use.

Driving animations based on states like entering, expiring, dismissed, moving etc would be far nicer.

<ToastBar
  toast={t}
  style={{
    ...t.style,
    animation: t.visible ? 'slide-in-left 3s ease 0s 1 both' : 'slide-out-right 3s ease 0s 1 both',
    transition: 'all 0.3s cubic-bezier(0.040, 0.800, 0.200, 0.970)'
  }}>
  {({ icon, message }): JSX.Element => (
    <>
      {icon}
      {message}
      {t.type !== 'loading' && (
        <Button
          Icon={IconClose}
          onClick={(): void => {
            toast.dismiss(t.id)
          }}
        />
      )}
    </>
  )}
</ToastBar>

[sameer920]

Is this still an issue and have you tried modifying the exit animation?

[viveleroi]

Yes it's still an issue. I can't modify the exit animation because it doesn't allow me to determine how the toast was dismissed.