feat(components): Popover exit animation

[Denny09310]

Description

Add the ability to have a popover exit animation.

What's been done?

• Added 'onanimationend' custom blazor handling
• Added '--animation-exit' css variable
• Handled animation delay on popover

Checklist

• My code follows the project's coding style and guidelines.
• I have included inline docs for my changes, where applicable.
• I have added, updated or removed tests according to my changes.
• All tests are passing.
• There's an open issue for the PR that I am making.

Additional Notes

• There is one test that the dropdown is failing even though visually it works well.
• I needed to add the custom handling in the LumexUI.js if it's not the correct place I can change it
• The only thing I'm worried about with this method is that, initially passing 'Open' as true and then changing it to false, does not trigger the animation correctly I think, leaving the 'IsVisible' to true. I don't know how to test that

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

❌ Patch coverage is 92.30769% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 93.27%. Comparing base (19b89dc) to head (63ff434).
⚠️ Report is 134 commits behind head on main.

Files with missing lines	Patch %	Lines
src/LumexUI/Infrastructure/EventHandlers.cs	66.67%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #254      +/-   ##
==========================================
- Coverage   96.95%   93.27%   -3.68%     
==========================================
  Files          70      152      +82     
  Lines        1542     2646    +1104     
  Branches      150      395     +245     
==========================================
+ Hits         1495     2468     +973     
- Misses         28       93      +65     
- Partials       19       85      +66     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[desmondinho]

Hey @Denny09310,

Thanks for this PR! This is something I’ve been meaning to get to for a long time but never quite managed.
I got a bit sick, so I couldn’t check it out earlier.

I have a couple of concerns:

1. I don't think we need a new AnimationEventArgs at all;
2. onanimationend is already a valid event;
3. The popover should be removed from the DOM after exit;
4. In general, I'd handle this just like I did with collapse (via intermediate states, such as expanded -> collapsing -> collapsed). Even then, the current solution isn’t ideal since the transition can’t be interrupted if the user spams clicks;

Because of this, I’d probably put this on hold for now.

What I really want is for the animation to be interruptible. For that, we should rely on transitions, since they are inherently interruptible. Keyframes, on the other hand, restart every time they’re triggered, which doesn’t look great.

What do you think?

[Denny09310]

I think it’s perfect. This was just the first approach I came up with, and I wanted your opinion on it. I haven’t found a better method to add an animation that also removes the element from the DOM afterward, but I like your idea more. To have the ability to interrupt the animation would be ideal

[desmondinho]

Great! You might have noticed that I created a Blazor port of React Sonner.
In that component, I use Task.Delay(200) after setting a remove flag to true. This triggers the removal transition before the actual DOM removal.

I went with Task.Delay because the original React code used setTimeout, but I suspect ontransitionend would be an even better solution… need to investigate why it wasn’t used in React Sonner.

So the flow would look something like this:

1. Toggle the visibility state
2. Re-render to apply the exit state (class or data attribute)
3. Wait with Task.Delay during the transition / or use ontransitionend
4. Toggle the actual presence state (Popover.Open in our case) to remove it from the DOM (the transition has completed already at this point), either after the delay or in the ontransitionend event callback

[Denny09310]

Please see this comment. I don't know how to solve it