Support for custom view transition animations

[markmcintyre]

One of the biggest benefits of StyleX over its alternatives is being able to define complex rules like keyframes and animations in the component that uses them.

Unfortunately there's an exception to this when it comes to the View Transitions API, which should be entering Baseline Newly Available very shortly. If we want to define a custom animation for the ::view-transition() pseudoelements, this can't be done in the stylex.create() alongside the component that uses them, since they need to be attached to the document root.

It would be useful if we could define ::view-transition(name), ::view-transition-group(name), ::view-transition-image-pair(name), ::view-transition-new(name) and ::view-transition-old(name) in a StyleX create() definition (or through a dedicated mechanism similar to stylex.keyframes()) and have them exist unconditionally (without being attached via props to an element) in the generated CSS file. That way, if a component I'm writing needs a view transition defined, I can keep its definition with the rest of its styles, rather than move them to the top-level CSS document.

[nmn]

I'm working on this already. The design of the view transitions API is a bit weird and I want to get the way we support it right. Here are just a few of the ways things are annoying:

1. view-transition-name needs to be globally unique within a document. This means that in most cases, you'll need to use something like useId() from React and set the value dynamically.
2. However, any dynamic patterns for setting styles, such as inline styles or CSS variables cannot be used to set the name within a ::view-transition(name).
3. The latest changes to Chrome include a new view-transition-class. The StyleX solution will need to support both names and classes within the ::view-transition[-xxx]() selector.

Supporting view transitions within StyleX was basically impossible until the view-transition-class property was introduced. However, it is going to be Chrome-only for the forseeable future.

I also have no idea if and when Firefox will implement any of these APIs.

For the APIs that are already supported, StyleX already can be used for them. Which, sadly, means authoring a separate CSS file for globals.

[markmcintyre]

Glad to hear it's in the works, @nmn !

view-transition-name needs to be globally unique within a document. This means that in most cases, you'll need to use something like useId() from React and set the value dynamically.

Since the transition name is globally unique, it probably doesn't need to be in the generated stylesheet. i.e. It might be better to have <tag {...stylex.props(...)}> expand inline into <tag class="xsdfj eiutw" style="view-transition-name: myValue">

I'm not sure if useId() is appropriate here, since a developer is likely to want to transition between entirely different components. For example, have a card flip around to expose a settings dialog. Maybe it's best to not have StyleX manage the view-transition-name at all, and leave it up to the developer to add their desired name inline as above?

view-transition-class, on the other hand, seems like it could be managed by StyleX, since that can be applied to any number of elements.

Anyway, thanks for the details! Really looking forward to see how this evolves!

[nmn]

Maybe it's best to not have StyleX manage the view-transition-name at all, and leave it up to the developer to add their desired name inline as above?

That's what I meant. useId() was just an example of what the developer might have to use to generate unique names for multiple instances of the same component.

view-transition-class, on the other hand, seems like it could be managed by StyleX,

Again, the plan is not to manage this and let the developer handle it.

---

The challenge isn't setting view-transition-name or view-transition-class on an element. The challenge is setting ::view-transition(name). In many cases, the name won't be known statically and so ::view-transition(name) won't be known statically to be a part of the generated CSS file. And because it's a top-level pseudo-element, it cannot set as an inline style.

[nmn]

FWIW view-transition-name or view-transition-class can already be set in StyleX. I'm thinking about solutions for ::view-transition-* global selectors and if there is a way to support them in StyleX even though they don't really make sense as atomic classNames.