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

> That doesn't seem quite right, as it would result in a partial sliding animation if going from next-slide to some other kind of page.

Sure, need to play with it with a class-based polyfill, hard to whiteboard the exact thing.

> 
> I'm still not sure how I'd use this in an SPA. How would I activate these rules in an SPA?

```jsx
   function Slide({index: number}) {
     return <>
       <style>{` // dangerousReactHTMLStuff or a style component or whatever
@navigation from-prev-slide {
  target: urlpattern(/slide${index - 1});
}

@navigation from-next-slide {
  target: urlpattern(/slide${index + 1});
}
`}</style>
   <main>{slideContent[index]}</main>
     </>
   }
```

- When you're on `/slide1` and clicking `<a href="/slide2">`, the "current navigation" would match `/slide1` (incoming) and `/slide2` (outgoing).
- You capture the old state, and later the router or whatever would eventually render the above JSX and would change the style and apply the new navigation matchers
- At that point `from-prev-slide` navigation would be matched and its corresponding animation name (which you don't have to rerender).
- Note that if you go back, `from-prev-slide` would be matched again but it would be unmatched when you re-render and won't apply to the pseudo-elements.





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