Does Liveview support view-transitions?

Phoenix Forum Questions / Help
4

SOOOOO. I’m re-building my personal website, and it’s full LiveView of course. :slight_smile:

I was looking into supporting the View Transitions API even though there is no API in LiveView. Found this topic, researched a bit online, I adapted @LostKobrakai code and came up with something like (it’s in TS):

// View Transition API integration
function supportsViewTransitions(): boolean {
  return 'startViewTransition' in document;
}

function startViewTransition(): void {
  if (!supportsViewTransitions()) return;
  document.startViewTransition(() => pageLoadingDone);
}

let onPageLoaded = () => {
  topbar.hide();
};

let pageLoadingDone = new Promise<void>((resolve) => {
  window.addEventListener(
    'phx:page-loading-stop',
    (_info) => {
      onPageLoaded();
      resolve();
    },
    { once: true }
  );
});

window.addEventListener('phx:page-loading-start', (info) => {
  const event = info as CustomEvent;

  // Only start view transition for navigation events, not form submissions
  if (event.detail?.kind === 'redirect') {
    startViewTransition();
  }

  topbar.show(300);
});

window.addEventListener('phx:page-loading-stop', (_info) => onPageLoaded());

/* Basic view transition styles */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300;
}

@media screen and (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

Any drawbacks to this that I might not be considering? :thinking:

At least all seems to be working well. I asked an LLM and of course it doesn’t find any problem with it, but since LLMs are full sycophant… don’t trust it. :smiley:

1 Like