Popover Animation :closed

  • Janis

    22 days 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

    22 days ago

    Could you use a style element to handle this?
    🙏1
  • Janis

    20 days 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?

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!

© Copyright 2024 toddle. All rights reserved.