A startViewTransition wrapper method.

viewTransition.js

/**
 * Wraps the startViewTransition to check avialability and reduced motion settings.
 * Usage: await viewTransition(() => {this.showElement = true});
 * @param {Function} callback - callback to function that triggers the animation.
 * @returns {Promise<unknown>} - Finish transition.
 */
export const viewTransition = (callback) => {
  return new Promise((resolve) => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion)');
    const isReducedMotion = mediaQuery.matches;
    if (!document.startViewTransition || isReducedMotion) {
      callback();
      resolve();
    } else {
      const transition = document.startViewTransition(() => {
        callback();
      });
      transition.finished.then(resolve);
    }
  });
}