loading

AnimatePresence

An element that has already left the DOM cannot animate. That is the whole problem exit animations exist to solve, and the presence components solve it by keeping removed content rendered until its exit has finished. You still write ordinary Blazor - flip a bool, remove a list item, change a page number - and the removal is what schedules the animation.

Exit animations

Wrap conditional content in BmotionAnimatePresence and give the child an Exit target. When IsPresent goes false the child plays that target and is removed once it lands. Mode decides how an exit overlaps a re-entry: Sync lets them run together, Wait holds the new content back until the old one is gone.

Razor

Keyed lists

BmotionPresenceGroup does the same job for a collection, tracked by key: removed items play their Exit before leaving, added items play their enter, and an item put back mid-exit cancels the exit and returns. There are no flags to set and no removal to delay - mutate the list and the animations follow.

Item One
Item Two
Item Three
3 item(s)
Razor

Pop layout

By default an exiting item still occupies its space, so the row it sits in only closes up once the animation ends - a visible beat of dead air in a chip row or a grid. Mode="BmPresenceMode.PopLayout" takes the exiting item out of the layout flow (position: absolute at the spot it was in) so its siblings reflow immediately while it fades out over them. The container needs position: relative to anchor it. Tap a chip to remove it.

Springs ✕
Gestures ✕
Drag ✕
Layout ✕
Variants ✕
Keyframes ✕
Razor

Switching between items

BmotionPresenceSwitch covers the case where content is replaced rather than added or removed - paging, toasts, a wizard step. Change Item and the outgoing subtree plays its Exit first, still rendering the old item as it goes, because the content is a template of the item rather than a snapshot of it. Mode defaults to Wait here; Sync overlaps the two.

1
Razor
Bmotion 0 el · 0 active
An unhandled error has occurred. Reload 🗙