This pull request makes it possible to dynamically apply unique view-transition-names, making it easier to customise transitions in CSS.
Why? View Transitions require unique view-transition-names so it can animate between the two states. For example, in a photo gallery, you might give each photo in the grid a unique name of image-:id (where :id is unique), which is also applied to the photo when viewing it in full. Customising view transitions in CSS requires referencing the view-transition-name. However, if each element has a unique view-transition-name then the CSS has to reference each of these names for customisation.
How? This pull request adds events to the transition lifecycle. These include:
turn:before-exit
turn:before-transition
turn:before-enter
turn:enter
The detail of these events includes:
action: advance or restore
initiator: the element that triggered the visit (a, form, or html if a Back/Forward or programmatic visit)
referrer: the URL of the page the visit was triggered from
turn:before-exit and turn:before-transition also include newBody for customising the incoming markup.
With these events, it's possible to annotate links with references to the elements that should transition. For example:
window.addEventListener('turn:before-transition', function ({ detail }) {
let { action, initiator, newBody, referrer } = detail
// apply `view-transition-name`s to both element in the current body and `newBody`,
// based on the `action`, `initiator`, and `referrer`
})
In this way, view-transition-names can be simple, and easily referenceable, e.g. image
This pull request makes it possible to dynamically apply unique
view-transition-name
s, making it easier to customise transitions in CSS.Why? View Transitions require unique
view-transition-name
s so it can animate between the two states. For example, in a photo gallery, you might give each photo in the grid a unique name ofimage-:id
(where:id
is unique), which is also applied to the photo when viewing it in full. Customising view transitions in CSS requires referencing theview-transition-name
. However, if each element has a uniqueview-transition-name
then the CSS has to reference each of these names for customisation.https://github.com/w3c/csswg-drafts/issues/8319 has some ideas to improve this, but in the meantime this pull request allows for simple
view-transition-name
s to be applied on-the-fly.How? This pull request adds events to the transition lifecycle. These include:
turn:before-exit
turn:before-transition
turn:before-enter
turn:enter
The
detail
of these events includes:action
:advance
orrestore
initiator
: the element that triggered the visit (a
,form
, orhtml
if a Back/Forward or programmatic visit)referrer
: the URL of the page the visit was triggered fromturn:before-exit
andturn:before-transition
also includenewBody
for customising the incoming markup.With these events, it's possible to annotate links with references to the elements that should transition. For example:
In this way,
view-transition-name
s can be simple, and easily referenceable, e.g.image