Allow customizing exit animation when user manually dismisses toast
viveleroi opened this issue · comments
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>
Is this still an issue and have you tried modifying the exit animation?
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.