Missing Types: ViewTransition

[GrandSchtroumpf]

Missing types

startViewTransition now support an object as parameter { update: () => void | Promise<void>; types: string[] }
https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types

document.startViewTransition({
  update: updateDOM,
  types: ['spa-navigation'],
});

Also the ViewTransition object now includes a types key of type ViewTransitionTypeSet which implement the Set object.

Missing viewTransitionClass in CSSStyleDeclaration

The view-transition-class declaration should be included in the CSSStyleDeclaration
https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-class

element.style.viewTransitionClass;

This feature is supported by Chome (125) and Safari (18).

Note: Both features are not available on MDN yet as for today (27 January 2024)

[fabb]

came here for this.

do you know if there are browser versions that support the startViewTransition function, but only with a closure parameter and not the object parameter? if yes, then for these browsers the fallback if (document.startViewTransition) {} else {} would not work and i'm not sure how to write it.

[GrandSchtroumpf]

@fabb Yes some browsers will only work with the callback. You can do that :

interface ViewTransitionParams {
 update: () => void | Promise<void>;
 types: string[]
}
function viewTransition(params: ViewTransitionParams) {
  if (!('startViewTransition' in document)) {
    // View transition is not supported
    return params.update();
  }
  try {
    // View transition is supported with params
    return document.startViewTransition(params);
  } catch {
    // View transition is supported with callback
    return document.startViewTransition(params.update);
  }
}