Popover Animation :closed

Janis · 2024-12-23T21:29:21.012+00:00

I managed to apply a @starting-style transition to a popover, but I can't figure out how to apply a closing animation since the pseudo-element :closed is not supportedThe goal would be to do something like:[popover]:closed { opacity: 0; transform: translateY(10px) scale(0.95);}

Janis

7 months ago

I managed to apply a @starting-style transition to a popover, but I can't figure out how to apply a closing animation since the pseudo-element :closed is not supported

The goal would be to do something like:

[popover]:closed {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
Tom Ireland

7 months ago

Could you use a style element to handle this?
Janis

7 months ago

Hmm yes I tried that but couldn’t get it to work. I guess it’s a matter of assigning it to the correct div. I have a <dialog> element as the parent, how would I call that. Do I assign a class to <dialog> and then the style element points to it with the animation?

Popover Animation :closed

Janis

Tom Ireland

Janis