Transition on modal.close()
Trying to createa fade out() on my modal when it closes, so that it doesn't just blink out of existence. (the closing is a function as I have multiple dialogs so being able to just call a function is more straightforward and easy to read)
Using animation doesn't seem to work, I had put an animation in multiple manners, first I tried
modal[close], then I tried to just add a class having an animation .close
While also putting the closing in a timeout setTimeOut(closing, 4000)to ensure it would have time to run, didn't seem to work
then I read online that it should be with transition, but I can't get transition to work properly for some reason ... I am probably doing it wrong
10 Replies
NOTE, I know I haven't put a
classList.add("close") in my image, thats because I removed it as it wasnt workingTransition on opacity will not work, becausw your component change state from display:none to display: block and you canβt use transition on display property π here is codepen which will solve your problem π https://codepen.io/luko248/pen/ZENpoyW enjoy
It work properly on chromium browsers, safari and firefox have some issues for now. We will se, what they do with that in the future.
Kevin Powell
YouTube
We can now transition to and from display: none
Start writing CSS with confidence π https://cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=transitiondisplay
π Links
β
Great article from Chrome for Developers blog on this : https://developer.chrome.com/blog/entry-exit-animations
β
Open Web Docs: https://openwebdocs.org/
β Timestamps
00:00 - Introduction
00:40 - Using ...
The title of the video is only about display:none, but the link includes a timestamp for the part about modals.
Just to add to the conversation...
As LukΓ‘Ε‘ suggests you cold use the
@starting-style property.
Bear in mind that this won't work in all browsers yet as it is relatively new. However, as this tranistion could be considered as progressive enhancement, this shouldn't be an issue.
I did noticed that the suggested code doesn't actually add the fade out that you requested.
One way to achieve the a fade-out you could add your previous "close" class (with transition) first and then use setTimeout() to actually close the dialog after the transition has completed, somthing like this:
You could also probably improve this by using JS to detect when the transition has completed automatically using the event listener "transitionend".by the way,
modal[close] doesn't exist
only modal[open]
don't do this
don't use a timeout
use either transitionend or animationend:
https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event
if you change the values in css, then you need to change in javascript too
however, if you forget, everything goes screwy
if you use animationend, you can check the name of the animation with animationName
https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/animationNameI did mention transitioned, I was just trying to keep it simple
this doesn't keep it simple
messing with timeouts when innapropriate will be a recepie for disaster
besides, it's an event listener
it's nothing people won't do somewhere else
also, what do you expect to happen when you alt-tab while it is transitioning/animating?
some/all animations pause when you change tabs or apps or programs
also, what if the pc chugs and the animation takes longer?
this is why i deem it innapropriate to use a timeout
the website will look broken or act funky
ill give it a look, sorry it didnt give me a notification
yes, I removed the fadeout while I was fiddling around trying to get it to work, I noticed onl after sending the help request that it had been removed
thank you all for the help, Ill give it a look shortly!
thank you all, its working now!