# viewTransition

> Bridges a SharedElement's enclosing Frame to the native View Transition API: each Frame reload now runs inside `document.startViewTransition()`, since the platform only opens one when script explicitly wraps an in-place update, so elements sharing a `view-transition-name` morph across the reload instead of popping, one transition shared per Frame.

```ts
import { viewTransition } from "@sdxc/ui/mixins";
```

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

```ts
viewTransition(): MixinDescriptor<HTMLElement>
```

Returns: A mixin descriptor for a SharedElement's `mix` prop.

## Examples

```tsx
<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.

#### Signature

```ts
new ViewTransitionEvent(transition: NativeViewTransition | null)
```

#### Properties

| 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.

#### Signature

```ts
const TRANSITIONING_ATTRIBUTE = "data-transitioning"
```