v147 · CSS · View Transitions

View Transition Pseudo-elements

Pick a colour to trigger a real View Transition, then watch the log compare the standard transition lifecycle with a runtime probe for view-transition pseudo handles. Current stable Chrome may expose the transition itself without exposing those pseudo-elements through Element.pseudo().

Checking View Transitions API support…

Click a colour to trigger a view transition. The event log captures what fires on the pseudo-elements.

transition target — click a colour
Blue
Green
Purple
Orange
Teal
Rose

view-transition pseudo handles probed at runtime

probing view-transition pseudos

// Runtime probe: get the pseudo-element object if exposed
const vtPseudo = document.documentElement.pseudo?.('::view-transition');

if (vtPseudo) {
  // Experimental builds may expose animation events on the pseudo itself.
  vtPseudo.addEventListener('animationstart', e => {
    console.log('view-transition started', e.pseudoTarget);
  });
  vtPseudo.addEventListener('animationend', e => {
    console.log('view-transition ended');
  });
}

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗