Repository navigation
feat(Dialog): enter and exit animations (#613) - #615
Merged
Merged
Conversation
…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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #613.
What changes
BbDialogandDialogOpenOptions(forDialogService.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 howBbMotionhides 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, theOpenAsyncresult still completes at once; only the removal waits.How
DialogContextgains an internal "exiting" phase. Portal, overlay and content render while the dialog is open or exiting.BbDialogContent(primitive) gets two public hooks,EnterAnimationandExitAnimation(Func<ElementReference, Task>?). The exit hook is what holds the dialog on the page.motion.jsgets a one-shottransitionexport that reusespresetFrames. The styledBbDialogContentandBbDialogProvidercall it. The provider keeps a closing dialog in its stacking position until the exit ends.Demo and API
animations.txtsnippet.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 fortransition(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.