Help with animating dialog element
I am having some difficulty understanding what's happening with this pen: https://codepen.io/mindjacker90/pen/KwwBpjj.
Everything works as expected until it transitions out. When the dialog closing transition runs, if the dialog has a positioned ancestor, the percentage values of properties like height become relative to that ancestor.
I do not understand why this only happens when the closing transition is playing.
I would appreciate any explanation. Thanks for taking the time to go through my question.
2 Replies
The styling on your
dialog relies on it being position: fixed, but that style is only applied when it's [open].
When you close it, that attribute is striped, so the user agent style making it position fixed is gone, so the sizing of it doesn't work anymore.
So, just add position: fixed to the dialog selector 😄
then it's always position fixed, so while it's closing, it keeps all the styles it needsThanks, that's what I did at the end.
For some reason I didn't inspect the dialog when it was open(mistake on my part) and assumed it had position set to absolute.
Thanks for taking the time.