Does Liveview support view-transitions?

Phoenix Forum Questions / Help
1

Just read about this in HTMX’s blog post:

</> htmx ~ Examples ~ View Transitions

It’s called “view transitions” and it’s coming into the standard. Anyone play with this even outside of Liveview perhaps? What are your thoughts?

6 Likes
2

It might be possible to do that by hooking into the livecycle events of LV similar to this one: Phoenix LiveView browser loading spinner / https://twitter.com/_developit/status/1625612424576376840?s=12&t=r2wsZ3n1jFq2d8DsnGMu-Q · GitHub

Chris mentioned that liveview itself won’t include anything not yet standard though.

5 Likes
3

I started playing with view transitions after reading this post and decided to test it on LiveView. This chunk of code was enough to get it working.

The technique is not a standard yet, but it has a good usage %. Also, it’s a nice progressive enhancement, since it updates the DOM “the normal way” if the browser doesn’t support it.

Perhaps it could be a nice addition to LiveView, as it is very simple and allows developers to easily add complex animations when content changes.

10 Likes
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