ViewTransition

Gives the first element of its children a view transition name and class, so the browser animates that element between the old and the new screen: it enters (an element that appears with the name), exits (one that disappears), updates (the same name with new content) and shares (the same name on both screens, moved or resized). The phases are the browser's own; select them in CSS with ::view-transition-old(name), ::view-transition-new(name) and :active-view-transition-type(). exit="none" is not offered: the browser decides an exit before the update runs.

No wrapper element is added. Without the browser API the name and class are only styles, so the component renders correctly everywhere.

Import#

import { ViewTransition } from "@shadow-js/web";

Signature#

function ViewTransition(props: ViewTransitionProps): Accessor<unknown>

Parameters#

Returns#

An accessor of the content (two anchors and the children).

Examples#

import { useSignal } from "@shadow-js/core";
import { ViewTransition } from "@shadow-js/web";

function Hero() {
  const [src] = useSignal("/hero.png");
  return (
    <ViewTransition name="hero">
      <img src={src()} />
    </ViewTransition>
  );
}