Labeling transitions to customize styling

[tbondwilkinson]

Currently if you want to configure a transition, you can add a class to the document or the elements, but this feels a little rough.

Instead, if there as an option to label a transition, you could style it more directly.

const transition = document.createDocumentTransition({name: 'home-to-about'});

::page-transition-outgoing(root)::page-transition-name(home-to-about) {
}

[vmpstr]

I think that's a good idea.. I wonder if name should become a parameter to the ::page-transition pseudo root, so if you also have pseudo descendant combinators (assuming syntax is ::>> you could write something like

::page-transition(home-to-about) :>> page-transition-outgoing-image(root) {
  ...
}

This also works nicely if in the future we want to support multiple independent transitions where you can just specify different names for each one

[jakearchibald]

The nice thing about using classes is you can add many of them.

For example, let's say that the home page has a bigger header than other pages, and the about page doesn't have a sidebar. You could decide that home-to-about means the header will get smaller, and the sidebar will exit. But then you'll need to have some of the same rules for home-to-article, home-to-contact, home-to-search-results etc etc, and same again if multiple page types don't have a sidebar.

In this case it'd be better to express "large-header-to-small-header" and "sidebar-exiting", which you can do with two classes, but cannot do with one name.

There's also back vs forward transitions.

We should think about how we'd solve this for MPA (the answer may still be classes).

[tbondwilkinson]

What about adding classes to the pseudoelements, instead of to the document or shared elements? It looks like you're already thinking about exposing the psuedo elements from the transition Object?

[jakearchibald]

Innnnteresting. I'll look into how that works parsing-wise