[view-transitions-2] Allow styling based on navigation/transition state #10434
Description
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:
@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:
@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 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.