Ease use of document.startViewTransition(callback) when rendering components

[nicooprat]

TL;DR: demo (needs Chromium based browser according to current support)

I recently played a bit with the new document.startViewTransition() API. Seems like the simplest is to use a generic hook from vue-router onBeforeRouteUpdate:

onBeforeRouteUpdate((to, from, next) => {
  document.startViewTransition(next)
})

But if one wants to transition when a single prop or ref updates, we have to hack a bit by using an intermediary value:

// Init same as prop
const delayedVariant = ref(props.variant);

// When prop changes, update the ref according to prop after create a new view transition
watch(
  () => props.variant,
  (newVariant) => {
    if (!('startViewTransition' in document)) {
      delayedVariant.value = newVariant;
      return;
    }

    // DOM changes must be done after `startViewTransition` is called
    document.startViewTransition(() => {
      delayedVariant.value = newVariant;
    });
  }
);

This is a bit verbose, and might need 2 renders if the original prop is used in the template.

It would be super easy to delay the rendering if some kind of next was possible with the onBeforeUpdate component hook:

onBeforeUpdate((next) => {
  document.startViewTransition(next)
});

What do you think?

I may have missed a simpler way of doing it though!

[nicooprat]

Edit: I found an interesting way of abstracting this implementation with a customRef (docs):

https://stackblitz.com/edit/vite-thbkze?file=src%2Fcomposables.ts,src%2FApp.vue,src%2Fcomponents%2FHelloWorld.vue

This way we can just update a value, and the transition will start before the Vue dependency system is actually triggered:

const delayedVariant = useTransitionRef(1);

delayedVariant.value = 2; // will trigger document.startViewTransition() before being actually updated

We can also do the same with computed:

const delayedVariant = useTransitionComputed(() => props.variant);