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

> I think I like the direction of this, but some of it isn't clear to me. Can you show some code for a basic slide-from-the-side transition between two particular URL patterns, that would work for both MPA and SPA, and both push navigations and traversals?

Sure!
Something like the following:

```css
// These are dynamically rendered on client-side (SPA) or server-side (MPA) to match the relevant URL pattern.
// e.g. the following would be rendered when the URL matches `/slide2`:

@navigation next-slide {
  target: urlpattern(/slide1);
  type: navigate, back-forward;  
}

@navigation previous-slide {
  target: urlpattern(/slide3);
  type: navigate, back-forward;  
}
//////

::view-transition-old(root) {
    animation-name: none;
}

@media (navigation: next-slide) {
  ::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }

@media (navigation: previous-slide) {
  ::view-transition-new(root) {
    animation-name: slide-in-from-right;
    animation-direction: reverse;
  }
}
```

The idea is that we don't need to know the "current" URL, the framework or whoever already knows this. So all the navigation rules apply to the target URL, whether it's the next or the previous one. In this scenario we only affect the pseudo-elements so we don't need to worry about outgoing transitions.
 If we ever want to support declarative SPA transitions we can allow separating to `from`/`to`, we can also consider doing this now.







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