Examples

Togglable

Click the Enter and Leave buttons to toggle the element. The animation runs as a native view transition, defined entirely in the ::view-transition-old() / ::view-transition-new() CSS. In a browser without the View Transitions API, the element toggles instantly.

Triggering with the Action component

ViewTransition exposes the same enter(), leave() and toggle() methods as Transition, so the Action component can drive it declaratively. No custom onClick handlers are required. Here the buttons target the Togglable instance and call its methods directly through data-option-effect.