#dialog's ::backdrop won't transition

16 messages · Page 1 of 1 (latest)

carmine crypt
light palm
# carmine crypt https://codepen.io/dzowzie/pen/raVjjxb Hello friends. In the above example, I'v...

You can try to use keyframes instead.
I think the problem here is that the backdrop is not just hidden with display:none; or anything like that, the backdrop doesnt exist until you actually toggle the modal, and that is why it fails i believe. So, you may need to use keyframes for this one.

I have not worked a lot with the dialog tag, only used it a couple of times... But i think this would be the best solution

#

Yeah, it works for the fade in at least... But not for the fade out, because the backdrop is removed instantly, if this can somehow be delayed, the problem could be solved with fadeout too

#

I just remembered Kevin Powell has a video about this...
https://www.youtube.com/watch?v=4prVdA7_6u0

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.

...

▶ Play video
carmine crypt
#

nice! it looks like it doesn't work on Firefox sadly. instead I could transition the dialog's opacity itself rather than the backdrop when Firefox is detected via @-moz-document

light palm
#

Yeah possibly 🙂

carmine crypt
#

interesting, the 'cancel' event doesn't invoke for me on Chrome or on Firefox.

light palm
#

I think it's this one... So if your browser is not like 50 years old, it should work ^^

carmine crypt
#

strange... if you click the Close button, does the MDN example pen update the result element's textContent for you?

light palm
carmine crypt
light palm