Re: [csswg-drafts] [css-view-transitions-2] Syntax for navigation-matching (#8925)

I still don't think I'm seeing a full example here, and it's already looking complicated to do part of an extremely basic example, which suggests the design has gone wrong somewhere.

For contrast, here's how I'd do the slide-between two pages example based on the proposal in https://github.com/w3c/csswg-drafts/issues/8683:

```css
@media (vt-next-page: urlpattern('/foo')) {
  @cross-document-transition allow;
}

@media (vt-old-page: urlpattern('/foo')) and (vt-page: urlpattern('/bar')) {
  @cross-document-transition allow;

  ::view-transition-new(root) {
    animation-name: slide-from-right;
  }

  ::view-transition-old(root) {
    animation-name: slide-to-left;
  }
}
```

Then, to make it work in SPA too:

```js
document.startViewTransition({
  oldURL: '/foo',
  newURL: '/bar',
  update() {
    // update DOM here
  }
});
```

Where `oldURL` and `newURL` would activate the various media queries for the transition.

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


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

Received on Thursday, 8 June 2023 12:45:24 UTC