Skip to content

feat(Dialog): enter and exit animations (#613) - #615

Merged
mathewtaylor merged 3 commits into
v4.2.0from
foreman/ml-672
Oct 16, 2026
Merged

mathewtaylor merged 3 commits into
v4.2.0from
foreman/ml-672

Conversation

@mathewtaylor

Copy link
Copy Markdown
Contributor

Closes #613.

What changes

BbDialog and DialogOpenOptions (for DialogService.OpenAsync) take five new options, built on Motion's presets:

  • EnterPreset / ExitPreset (MotionPreset?): the preset played on open, and played in reverse on close, matching how BbMotion hides content.
  • EnterKeyframes / ExitKeyframes: custom Web Animations keyframes. These override the preset, and exit keyframes play as written.
  • AnimationDuration (ms, default 200).

A closing dialog stays on the page, with data-state="closed", until its exit animation ends. Focus trap, scroll lock and the native <dialog> top layer are released after that. Reopening mid-exit cancels the exit. With no options set, dialogs open and close exactly as before. Reduced motion skips the animations, as Motion already does. For service dialogs, the OpenAsync result still completes at once; only the removal waits.

How

  • Primitives: DialogContext gains an internal "exiting" phase. Portal, overlay and content render while the dialog is open or exiting. BbDialogContent (primitive) gets two public hooks, EnterAnimation and ExitAnimation (Func<ElementReference, Task>?). The exit hook is what holds the dialog on the page.
  • Components: motion.js gets a one-shot transition export that reuses presetFrames. The styled BbDialogContent and BbDialogProvider call it. The provider keeps a closing dialog in its stacking position until the exit ends.
  • When a Motion enter is set, the built-in zoom is dropped. The CSS fade-in stays so the content doesn't flash before the script starts.

Demo and API

  • New "Animations" section on the Dialog demo, with the animations.txt snippet.
  • API Reference entries added for Dialog and DialogOpenOptions.
  • API surface snapshots updated: five Dialog parameters, the private cascade, and the two primitive hooks.

Tests

  • DialogAnimationTests (8 bUnit tests): no-animation dialogs still leave at once; exit holds the dialog until the animation ends (uncontrolled, controlled, service); reopen mid-exit; enter preset plays and replaces the zoom.
  • tests/js/motion.test.mjs: 3 new tests for transition (reversed preset with held last frame, reopen drops the held exit, custom exit keyframes, reduced motion).

Note

#612 (position, #614) changes the same Dialog files. Whichever merges second needs a small rebase.

…ptions (#613)

Dialog and DialogOpenOptions take EnterPreset, ExitPreset (MotionPreset?),
EnterKeyframes, ExitKeyframes and AnimationDuration. A closing dialog stays on
the page, with data-state="closed", until its exit animation ends. With none
set, dialogs open and close as before. Reduced motion skips the animations.
- An exit that ends at once now releases the dialog on both controlled and
  context closes.
- A superseded native exit no longer closes a reopened <dialog>.
- DialogService dialogs keep the focus trap, scroll lock and Escape handling
  until their exit ends; a stacked exiting dialog keeps focus until it leaves.
# Conflicts:
#	demos/BlazorBlueprint.Demo.Shared/Pages/Components/DialogDemo.razor
#	src/BlazorBlueprint.Components/Components/Dialog/BbDialog.razor
#	src/BlazorBlueprint.Components/Components/Dialog/BbDialogContent.razor
#	src/BlazorBlueprint.Components/Components/Dialog/BbDialogProvider.razor
#	src/BlazorBlueprint.Components/Components/Dialog/DialogOpenOptions.cs
#	tests/BlazorBlueprint.Tests/ApiSurface/ComponentsApiSurfaceTests.ComponentsApiSurfaceMatchesBaseline.verified.txt
@mathewtaylor
mathewtaylor marked this pull request as ready for review October 16, 2026 02:18
@mathewtaylor
mathewtaylor merged commit b005069 into v4.2.0 Oct 16, 2026
1 check passed
@mathewtaylor
mathewtaylor deleted the foreman/ml-672 branch October 16, 2026 02:20
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