Re: [w3ctag/design-reviews] View Transitions API (Issue #748)

@LeaVerou 

> Regarding [#748 (comment)](https://github.com/w3ctag/design-reviews/issues/748#issuecomment-1225922770) , with the current API, `updateTheDomSomehow()` needs to be repeated twice, which is fine when it's a separate function, but it means all such DOM modifications need to become separate functions, which as an author I'd find annoying.

I don't think this will be a huge issue in practice, as I expect developers will write a little helper function like this:

```js
async function doViewTransition(callback) {
  const skipTransition =
    !document.startViewTransition ||
    matchMedia('(prefers-reduced-motion)').matches ||
    localAppConfig.skipTransitions;

  if (skipTransition) {
    callback();
    return null;
  }

  await document.startViewTransition(callback).domUpdated;
}
```

Then the usage would be:

```js
await doViewTransition(() => {
  header.classList.add('whatever');
});
```

Even in a world where all browsers support view transitions, a helper is handy for centralising skipping transitions for reasons that are specific to the site (like reduced motion and `localAppConfig.skipTransitions` in the above example).
 
> Re:frameworks, I’m sure it's _possible_, and yes it doesn't look too bad, but it's unfortunate that it requires people to find out implementation details like `nextTick()` that don't come up during typical framework usage, and are different per framework. I think the current callback API is less friendly to the multiple layers of abstraction in modern web apps. It's not the end of the world if it doesn't change, but I still think not having a callback would serve the majority of cases better.

I don't think there's a model we can adopt where you wouldn't need to know about `nextTick()` in Vue. In order to create a transition, we need to capture the before state, and the after state. The problem is, Vue abstracts and defers the DOM changes, so you're reliant on the framework providing some sort of signal that it applied the changes you requested, and in Vue that's `nextTick()`. If that's tricky… that's on Vue.

My hope is that each framework will have a hook/component that wraps this, and turns state changes into transitions, similar to what they already do with animations, but with much less code.

If you haven't had an a-ha moment with this, then my docs suck. That's probably because I'm too deep in the spec/implementation. Would you be up for a video call where we talk through the API & examples? Hopefully the a-ha moment will happen, and you can tell me what details should have been at the very top of the docs, in bold, rather than buried somewhere 😄 

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/748#issuecomment-1318395415

You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/748/1318395415@github.com>