[ @sdxc/ui/mixins ]
viewTransition
Bridges a SharedElement's enclosing Frame to the native View Transition API.
import { viewTransition } from "@sdxc/ui/mixins";Usage
Wraps a SharedElement's enclosing Frame reload in one native view
transition, shared by every SharedElement on that Frame, so elements
sharing a view-transition-name morph instead of popping — settling finished on success and failure alike keeps a skipped transition from stranding the host or surfacing as an unhandled rejection.
Signature
viewTransition(): MixinDescriptor<HTMLElement>Returns a mixin descriptor for a SharedElement's mix prop.
Examples
<SharedElement id="cover" mix={viewTransition()}>
<img src={cover.src} alt={cover.alt} />
</SharedElement>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
ViewTransitionEvent
Dispatched on a SharedElement's host by viewTransition each time
its Frame starts reloading, carrying the native transition so a consumer
can await it or call skipTransition() — or null when the browser lacks startViewTransition() or the visitor prefers reduced motion.
new ViewTransitionEvent(transition: NativeViewTransition | null)| Property | Type | Description |
|---|---|---|
transition | readonly NativeViewTransition | null | The transition the reload now runs inside, or null when none could be opened. |
TRANSITIONING_ATTRIBUTE
data-* attribute viewTransition sets on a SharedElement's host
while its Frame's transition is in flight, so styling can suppress hover
affordances or pointer input for the span of the morph.
const TRANSITIONING_ATTRIBUTE = "data-transitioning"