Re: [csswg-drafts] [css-view-transitions-2] Syntax for customizing transitions based on their type (#8960)

> For example, a site might choose between the 2 for the same navigation (@bramus had an example for such a pattern).

The example is an SPA that – for whatever reason – can decide to do an MPA navigation after all. A typical scenario would be one where a new version of the SPA has been deployed, so that the user ends up on the latest version.

```js
document.addEventListener('a[href="/articles"]').addEventListener('click', async (e) => {
  // Do a regular navigation when a new app version has been detected.
  // Note: the type defined in @view-transition – if any – will be used.
  const serverAppVersion = await getAppVersion();
  if (localAppVersion != serverAppVersion) return true;

  // Fetch new data and build the markup
  const articles = await fetchArticles();
  const articlesFragment = buildArticlesFragment(articles);

  // Do a transition while also setting a type for the CSS the hook onto
  e.preventDefault();
  document.startViewTransition({
    type: 'back-to-articles',
    updateCallback: () => {
      updateContentWith(articlesFragment);
      window.history.pushState({}, '', '/articles'); // Or any other method to update the URL
    }
  });
});
```

With the type available in `document.startViewTransition` _(SPA)_ and in `@view-transition` _(MPA)_, the app can seamlessly switch between SPA/MPA type of navigations without the user even noticing.

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8960#issuecomment-1687631527 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 22 August 2023 07:32:24 UTC