Kevin Powell - Community•3mo ago

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

BrightieOP•3mo ago

NOTE, I know I haven't put a classList.add("close") in my image, thats because I removed it as it wasnt working

Lukáš Chylik•3mo ago

Transition 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

Lukáš Chylík

CodePen

Transition on display property

...

Lukáš Chylik•3mo ago

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.

Choo♚𝕂𝕚𝕟𝕘•3mo ago

https://www.youtube.com/watch?v=vmDEHAzj2XE&t=972s

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 ...

Choo♚𝕂𝕚𝕟𝕘•3mo ago

The title of the video is only about display:none, but the link includes a timestamp for the part about modals.

Chris Bolson•3mo ago

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:

function closeDialog(dialog){
  dialog.classList.add("close");
  setTimeout(() => {
    dialog.close();
    dialog.classList.remove("close");
  }, 600); // give the transition time to complete
}

function closeDialog(dialog){
  dialog.classList.add("close");
  setTimeout(() => {
    dialog.close();
    dialog.classList.remove("close");
  }, 600); // give the transition time to complete
}

You could also probably improve this by using JS to detect when the transition has completed automatically using the event listener "transitionend".

ἔρως•3mo ago

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/animationName

Chris Bolson•3mo ago

I did mention transitioned, I was just trying to keep it simple

ἔρως•3mo ago

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

BrightieOP•3mo ago

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!

Gaming

Programming

Transition on modal.close()