document.createDocumentTransition support

[marcopetersamazing]

Hi everybody!

The new Shared Element Transition API (https://developer.chrome.com/blog/shared-element-transitions-for-spas/) is coming to browsers, firstly to Chromium based browsers.

In Vue (using Vue Router) this can be implemented very simply, by adding a beforeEach function to the router, like this:

router.beforeEach(async (to, from, next) => {
    if (!document.createDocumentTransition) {
        next();
        return;
    }

    const transition = document.createDocumentTransition();
    await transition.start(() => next());
});

This checks for document.createDocumentTransition support and creates the transition, starts it and updates the DOM with the new page. The browser will handle everything else.

I've been looking into any possible implementations for this in Inertia (using Vue 3 in my case), but have not found any solutions.

Is this something that can already be implemented with the existing Inertia + Vue 3 implementation or is this something that should be developed for Inertia (maybe not specifically for the document.createDocumentTransition support, but hooking into the router might be interesting).

Looking forward to hear your opinions about this!