[csswg-drafts] [view-transitions-2] Allow styling based on navigation/transition state (#10434)

ydaniv has just created a new issue for https://github.com/w3c/csswg-drafts:

== [view-transitions-2] Allow styling based on navigation/transition state ==
With the introduction of declarative MPA transitions it's now possible to navigate to a different page on same site seamlessly. This also introduces a need to style elements differently based on whether the page was loaded via a VT or a simple load.

A common example of that is entrance animations, and a current specific use-case I have is the animation of shared elements, say a site's header. Let's say I have a header that should be flying in from above the top of the page down to its original position at the top of the page.
On subsequent page loads, when navigating between pages on same site using VTs the author may want to keep the header in-place, probably by excluding it from the transition using `view-transition-name: header`, but also specify that it should not animate again.

Here's the example in code:
```css
@keyframes flyIn {
  from {
    translate: 0 -100%;
  }
}

header {
  aniamtion: flyIn 600ms backwards ease-out;
}
```

And to prevent the animation with selector/conditional it should look something like:
```css
@view-transition-enabled {
  header {
    animation: none;
  }
}
```

Currently there's no persistent  selector that says "this page was navigated to via VT", there's only the transient `:active-view-transition` pseudo-class which is removed once the transition ends and is no longer active.

Though we could achieve this using the [`pagereveal`](https://chromestatus.com/feature/5205586941837312) event, we should probably have some rule/selector to specify this declaratively.
The pattern above already exists in SPAs today, and in order to easily transform SPAs to MPAs we'll need some simple mechanism to eliminate the need for keeping that state in user-land.

cc @khushalsagar @noamr 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10434 using your GitHub account


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

Received on Wednesday, 12 June 2024 10:42:59 UTC