Search code examples
lit-elementlit

Animating a slotted element

I'm building a popover that attempts to be as minimal as possible. The trigger and the content of the popover are both slots, because I wanted them to be able to be styled by the consuming application.

This is all working fine except for one thing: transitions applied to the slotted content element aren't applied when the content becomes visible (for example to fade in).

What are my options for allowing the consuming application to define this transition without having to specify it in the custom element?

Here's a playground link to the example.

Solution

  • I fixed this by adding keyframes animation to the slotted element:

        .menu {
      animation: fadeIn 0.2s;
    }
    
    @keyframes fadeIn {
      0% { opacity: 0; transform: translateY(-50%); }
      100% { opacity: 1; transform: translateY(0%);}
    }