modal show/hide animations
I have a
<modal> element. with a show animation (it changes opacity and zooms in).
this works fine.
but i can't find a way to have the same thing in reverse for closing.7 Replies
is it a div that youve turned into a modal or is it an actual <dialog> element? when you close a dialog element, it goes to display: none. So what you eed to do is when you click the "close" button, add a class or attribut that has the animation on it to make it fade out or scale down or whatever your animation is doing. Then have an event listener for "animation-end" to remove that class/attribute and actually close(); the dialog i.e turn it to display: none as you cant animate from or to display: none;
an actual
<dialog>then yes, youll need to add a class or attribute with the animation on THAT class , then add an eventlistener for animationend (that only runs once) , once the animation is over, remove that class and class for modal.close();
KP has a video exactly for this, im trying to find it.
https://www.youtube.com/watch?v=4prVdA7_6u0
this isnt the one im looking for but its close
Kevin Powell
YouTube
Animate from display none
A common problem people ask me about is animating from, or to display: none, since it's not an animatable property.
After making my recent video on the dialog element, I got a lot of questions about animating it in and out, and it just so happens to use
display: none when it's closed, so I saw it as a good opportunity to take a look at it.
...thx, i thought i saw this before, must not have comprehended it
you wouldn't happen to know how to make svelte ignore the "unused css selector"?
because that's why it's not working, it's taking it out when minifing.
*so it's not actually closing because the anim never runs because the selector was removed by vite/svlete
it works, i used a class instead of a custom attribute
class={closing?'closing':''}