Skip to content

feat: animate overlay exit animations - #651

Open
Denny09310 wants to merge 8 commits into
blazorblueprintui:developfrom
Denny09310:feature/exit-animations
Open

Denny09310 wants to merge 8 commits into
blazorblueprintui:developfrom
Denny09310:feature/exit-animations

Conversation

@Denny09310

Copy link
Copy Markdown
Contributor

Description

Rebases PR #584 onto upstream/develop and extends PR #615's Dialog exit-animation infrastructure to
Sheet, Drawer, ContextMenu, NavigationMenu and Toast, reusing the shared ExitAnimationGate /
OverlayExit / animation.js waitForExit mechanism. Also adds animation-fill-mode: both globally
and a fading native <dialog> backdrop. Dialog's own exit animations, presets, keyframes, duration,
reduced-motion support and native focus/modal behaviour are preserved unchanged.

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Documentation update
  • Refactoring (no functional changes)

Testing Checklist

  • Blazor Server
  • Blazor WebAssembly
  • Blazor Hybrid (MAUI)
  • Keyboard navigation / accessibility
  • Dark mode

Related Issues

Extends #615. Rebase of #584.

Changes

  • Sheet / Drawer / ContextMenu / NavigationMenu / Toast: closing content stays mounted with
    data-state="closed" until the exit animation completes; reopen mid-exit cancels the close; unmount
    happens only after the animation; multiple close requests start a single exit wait.
  • Toast: ToastData.IsDismissing + BbToast.OnDismissed callback; provider HandleDismiss is
    idempotent while dismissing; removal only after the exit plays.
  • CSS: global animation-fill-mode: both on [data-state="open"], [data-state="closed"]; native
    <dialog> backdrop fades out (dialog[data-state]::backdrop transition, transparent when closed).
  • Interop fallback: JS interop failure falls back to a fixed delay (fade 200 ms / slide 300 ms)
    instead of hanging.
  • Tests: 4 new exit-lifetime test classes + OverlayExitFallbackTests + OverlayAnimationCssTests
    • 2 JS cases; API surface snapshot updated for BbToast.OnDismissed. All 1288 C# and 13 JS tests pass.

ExitAnimationGate owns the closed-but-still-mounted phase every overlay needs:
the content registers an exit animation, the owner renders while IsPresent is
set, and a reopen or a newer close supersedes an exit still in flight. It is
composition rather than a base class, because some owners are contexts and
some are components.

OverlayExit wraps the waitForExit interop call together with its
JS-unavailable fallback, and animation.js is the one implementation of the
wait itself, now imported by positioning.js rather than duplicated there.

DialogContext moves onto the gate with no behaviour change: the same
registrations, supersede rules and completion notification, so Dialog keeps
the enter/exit API and lifetime PR blazorblueprintui#615 introduced.
@Denny09310 Denny09310 changed the title Feature/exit animations feat: animate overlay exit animations Nov 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant