docs: how to trigger animation when hide toast?
Eve-Sama opened this issue · 2 comments
On which page do you see this issue?
https://daisyui.com/components/toast/
Describe the issue
After read documents, I think the components from daisyui are html elements. When I init component Toast, I can see animation at start. But I don't know how to destroy Toast with animation.
What browsers are you seeing the problem on?
No response
Thank you @Eve-Sama
for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I
find a solution.
In the meantime providing more details and reproduction links would be
helpful.
Adding a new DOM element can trigger a intro animation in CSS, but removing an element from DOM is instant and CSS can not show an outro animation for it.
To overcome this limitation you would need to apply a transition to fade out the toast and then remove it from the DOM. You can do it by adding some Tailwind CSS class names (like opacity-0 transition-all duration-1000) and then remove the element from DOM after 1000ms.
Let me know if you have a question.