How to create exit animation for Popover?

[imhalid]

I'm trying to add an exit animation to the popover, but it doesn't work exactly as I want.

I tried to do it with css but it didn't work

.PopoverContent {
  border-radius: 4px;
  padding: 20px;
  margin-top: 5px;
  background-color: white;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  will-change: transform, opacity;
}

.PopoverContent[data-state="open"] {
  animation-name: clipPathTransition;
}

.PopoverContent[data-state="close"] {
  animation-name: clipPathExitTransition;
}

@keyframes clipPathTransition {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes clipPathExitTransition {
  from {
    clip-path: inset(0);
  }
  to {
    clip-path: inset(100% 0 0 0);
  }
}

Then I tried to do it with javascript, but it shouldn't be that complicated. Is there anyone who can help?

<Popover.Content
        className="PopoverContent"
        data-side="clip"
        onInteractOutside={() => {
          const element = document.querySelector(".PopoverContent");

          element.animate(
            [
              {
                clipPath: "inset(0% 0% 0% 0%)",
              },
              {
                clipPath: "inset(100% 0% 0% 0%)",
              },
            ],
            {
              duration: 400,
              easing: "cubic-bezier(0.25, 1, 0.5, 1)",
              fill: "forwards",
              iterations: 1,
            },
          );
        }}
      >
   <ColorPalette />
</Popover.Content>

CodeSandbox link for those who want to try it

[benoitgrelard]

Have you seen this page: https://www.radix-ui.com/primitives/docs/guides/animation