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 #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.

How do you disable reloads or give them a different animation in this example? It seems great when it's simple but when you want to tweak it you might end up with monstrous media-queries. Also, this is VT-specific. By having this as "navigations", you could style other things based on where you're coming from.

Regarding having the URLs in the `startVT` function, sure, why not. I was thinking of something that would be declarative in advance, but putting this directly in `startVT` makes sense since it let's the SPA framework define what a navigation is.

```css
@navigation to-foo{
  to: urlpattern(/foo);
  type: navigate, back-forward, reload; // reload OK!
}

@navigation foo-to-bar {
  from: urlpattern(/bar);
  to: urlpattern(/bar);
}

@media (navigation: foo) or (navigation: foo-to-bar) {
  @cross-document-transition allow;
}

@media (navigation: foo-to-bar) {
  @cross-document-transition allow;
  ::view-transition-old(root) {
    animation-name: slide-to-left;
  }
}
```

-- 
GitHub Notification of comment by noamr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8925#issuecomment-1582531921 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:56:03 UTC