MotionTransition

Usage

TxMotionTransition transitions caller-provided content. modelValue identifies the requested view; render the default slot from its scoped key, which remains the outgoing key until the covered midpoint. No router, page data or business completion is created by the component.

Effects and carriers

inline renders an unframed stage. card adds a token-based surface, header and footer. modal centers a constrained dialog; overlay fills the visible viewport. Both dialog modes teleport to body, use the shared overlay allocator and trap focus. The demo displays all nine effects as cards and lets you choose any effect for inline, modal and fullscreen content. Editable text is actual slot input; completion labels reflect emitted events.

Best Practices

• Render from the slot's key, not directly from the changing external model. Keep content identity in modelValue and visibility in v-model:open.
• Keep the component mounted when closing. Set open=false instead of wrapping it in v-if. Closing commits pending content and restores focus while the dialog container leaves with opacity, scale and translation. Leaving nodes immediately exit focus/topmost ownership; reduced motion and explicit instant mode do not delay removal.
• Repeated model changes interrupt the previous run and commit the latest request. replay(), replayKey, and changing variant replay even when the content key is unchanged.
• Do not disable your trigger while transitioning if interruption is part of your interaction. Content itself is inert during motion; header/footer controls remain usable.
• For the source card's hover preview, update your content model from the native @mouseenter listener; the demo ignores hover while a run is active and also provides keyboard-operable buttons.
• Supply localized title, ariaLabel and closeLabel. A custom header uses ariaLabel as the dialog's accessible name.
• Honor the system reduced-motion preference. disabled=true or duration=0 provides an explicit immediate-commit path, without delaying content state or fabricating a successful business action.

API Reference

Props

Events

inactive covers explicit disabling, zero duration, offscreen content, a hidden document and KeepAlive suspension. Interrupted runs commit their own target before the next request begins. A subsequent request wins the final displayed state. Completion is a UI transition event, not confirmation of a network, save or navigation operation. Unmount cancels pending callbacks rather than emitting events from a destroyed component.

Slots and methods

CSS variables

Overview

The outgoing slot subtree is retained during leave. At full coverage, it is removed and the requested keyed subtree mounts. Enter reveals the new content, then completed fires after Vue's commit. Waves retain layered point delays; doors retain their independent hinge geometry; flip and fade animate the actual view instead of a branded placeholder.

A content action transfers focus to the stage during motion and then to the first focusable item in the incoming view. Dialog opening focuses the dialog. Only the topmost modal owns Tab and Escape; closure restores the connected opener without scrolling. Reduced motion and activity loss stop the single RAF and commit the target. Listeners, observers and pending frames are released on deactivation/unmount. useId supplies stable stage/title IDs and deterministic wave delay seeds for SSR and hydration.

Technologies

Sources are Amicro at commit 43c29ce, MIT, Copyright (c) 2026 SYED SUBHAN UDDIN. src/data/transitions.ts:23–199 supplies the six catalog implementations; src/components/PageTransitionOverlay.tsx:25–196 supplies the 14-point preview wave, door origins, iris, flip and curtain structures. PageTransitionCard.tsx maps to card preview/replay; PageTransitionModal.tsx maps to dialog preview, repeat and playback rate; PageTransitionOverlay.tsx maps to the reusable stage. Brand copy, clipboard showcase actions and router ownership are not component business behavior.

The registry file registry/ui/transitions/page-transition.tsx:4–22 declares 18 names, but lines 88–135 implement only stairs and wave. Lines 137–143 use one opacity fallback for all other names. This mapping preserves the source coverage without claiming 16 independent effects or exporting obsolete aliases:

The implementation uses the existing resolveTransition/easingFunction spring and useMotionActivity, with no React, Framer Motion or Tailwind runtime. The source's 380/850 ms content-swap timers are replaced by the actual covered midpoint and animation completion. Build, automated tests and real-browser acceptance are owned by the integration verification, not claimed by this page.