Allowing to start cross-document transition immediately

[bakura10]

What is the issue with the HTML Standard?

Hello,

I've tried to do some experiments around the View Transition API for cross-document transition to perform a fade-out/fade-in. The issue is that the whole transition starts when the new document is entirely loaded, given a few hundred of milliseconds of delay before performing the fade-out transition on the old document.

I could not find any way to start the transition of the old document sooner. The only way I've found is to mix the SPA method (using startViewTransition with the CSS based (using the @view-navigation) for the fade-in. But it seems a bit counter-unintuitive. Is there a better way to do that?

Handling of the fade-out to have the effect right away:

(delegateDocument).on('click', 'a:not([target="_blank"])', async (event, target) => {
      // Link to other websites and anchors are discarded
      if (target.hostname !== window.location.hostname || target.pathname === window.location.pathname) {
        return;
      }

      document.startViewTransition(() => {
        document.body.animate([ { opacity: 0 } ], { duration: 150, fill: 'forwards' });
      });

While the fade-in is handled in CSS:

@view-transition {
  navigation: auto;
}

::view-transition-new(root) {
  animation: 0.15s ease-in both page-fade-in;
}