ViewTransition and startViewTransition

startViewTransition(update, { types? }) runs an update in a browser view transition and resolves when the animation has finished. Without the browser API the update runs at once. types names the transition for CSS (:active-view-transition-type(name)).

<ViewTransition name class> gives the first element it wraps a view-transition-name and view-transition-class. The browser then animates that element between the old and the new screen: it enters when it appears, exits when it disappears, updates when its content changes, and is shared when the same name appears on both screens.

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

<ViewTransition name="cover" class="media">
  <img src={src()} alt="" />
</ViewTransition>;

Style the phases in CSS, for example ::view-transition-old(cover) and ::view-transition-new(cover). There is no exit="none": the browser decides an exit before the update runs. The component adds no wrapper element.