Function startViewTransition

Starts a ViewTransition with additional params. Based on these params, Velvette applies temporary classes to the document element, generates view-transition-name properties and adds temporary styles for the ::view-transition-* pseudo-elements.

Example

import {startViewTransition} from "velvette";
// This will return a ViewTransition, or a null if this browser doesn't support CSS View Transitions.
startViewTransition({
  async update() {
    // Make actual DOM update
  },

  // This would apply `vt-slide-in` on the root element for the duration of the transition
  classes: ["slide-in"],

  // This would capture any `li.item .box`, and would give it the `view-transition-name`
  // corresponding to "box-" plus its ancestor `li.item`'s id.
  // In addition, it would apply any style with a pseudo that matches '.any-box' to all the
  // captured elements.
  captures: { "li.item[:id] .box": "box-$(id).any-box" }

  // Would apply a blur during the transition, to the transition group generated
  // for any capture that matches the ".any-box".
  styles: {"::view-transition-group(.any-box)": {filter: "blur(1px)"}},
});
Copy