JavaScript access to temporary pseudo elements

[mattgperry]

Hey, great job with the latest revision of this API!

One thing I'd love to see is JavaScript access to temporary pseudo elements so we can animate them beyond the capabilities of CSS. I think this is important: JS libraries have usually unlocked features (independent transforms, spring animations, layout animations etc), often decades before native browser APIs and it'd be great to get that flexibility here.

The animations could be performed via WAAPI or requestAnimationFrame and would resolve a promise to mark the animation as complete.

async function navigate() {
  const transition = document.createDocumentTransition();
  await transition.start(() => {
    updateDom();
    
    return (prev, next) => await startAnimation(prev, next)
  });
}

prev and next here being keyed objects offering the created DOM elements used in the animation via their page-transition-tag IDs.

[absurdprofit]

@mattgperry does Javascript have access to pseudo elements? Afaik I've never seen an API or way of doing that. Which does raise a question I've had. Why pseudo elements?

[mattgperry]

Via WAAPI, some limited access, but the assumption here is it’s be provided explicit access via prev and next rather than suffer current limitations

[jakearchibald]

WAAPI already has full access to animating pseudo-elements, but yes, there's no way to change the 'inline style' of a pseudo-element.

Is it fair to say these features would cover your use-case?:

• Allow animation duration to be defined in a way that would allow non-declarative animations, such as requestAnimationFrame. This could be a promise that the developer resolves once the animation is complete.
• Provide script visibility to the pseudo-elements generated for a given transition.
• Expose something like el.style for pseudo elements, so 'inline' styles can be set frame-by-frame.

[mattgperry]

Yeah, that would be perfect!

[khushalsagar]

Provide script visibility to the pseudo-elements generated for a given transition.

Does that mean an API which lets you query the set of pseudo elements that were generated? Something like element.pseudos() which returns a list of CSSPseudoElements originating from element.

Expose something like el.style for pseudo elements, so 'inline' styles can be set frame-by-frame.

Would it be a good idea to add this to CSSPseudoElement. Sounds like this is a useful addition to animate any pseudo element.

[jakearchibald]

Something like element.pseudos() which returns a list of CSSPseudoElements originating from element.

Yeah, or if that's hard to add generally, we could have an API that returns the valid page-transition-tags for a given transition.

Expose something like el.style for pseudo elements, so 'inline' styles can be set frame-by-frame.

Would it be a good idea to add this to CSSPseudoElement. Sounds like this is a useful addition to animate any pseudo element.

Looks like there's already a note there suggesting it's a likely addition!