Re: [csswg-drafts] [css-view-transitions-2] Syntax for customizing transitions based on their type (#8960)

We recently discussed this issue, adding notes below:

- We like the idea of using a pseudo-class because its easily extendible to scoped transitions. The pseudo-class will be activated only on the transition root.
- The type should be one of the params to the `@view-transition` config. This helps authors use the same CSS for same-document vs cross-document transitions. For example, a site might choose between the 2 for the same navigation (@bramus had an example for such a pattern).
- For the MPA case, the type could either be limited to the Document declaring it. In other words, if the old Document declares a type its not carried over to the new Document. Or it does and we deal with the case where the new Document declares a different type.
   
   My preference is to let this be per Document. Much easier to reason about and we don't have any use-case where authors need us to carry it over from the old Document (vs just declaring it themselves in the new Document).
   
   Another option is to let the old Document be the decider but that's bad if the new Document chooses a different transition based on load state (transition to content if cache hit vs a loading screen).
- Does this class activate only on the transition root or all elements which could participate in the transition. @noamr made an excellent argument for only activating it on the transition root.
   
   Authors want namespacing in 2 ways: [transition root, transition type]. If we activate the pseudo-class on every element in the subtree, you can't namespace based on transition root. That'll force authors to express that namespacing in the transition type value instead.

  ```css
     div:active-view-transition(reload) > section {​
     view-transition-name: main-section;
  }
  
     html:active-view-transition(reload) > section {​
     view-transition-name: none;
  }
  ```
   vs
  ```css
     section:active-view-transition(sub-reload) {​
     view-transition-name: main-section;
  }
  
      section:active-view-transition(html-reload) {​
      view-transition-name: none;
  }
  ```
   Its trivial to use the descendant selector on all sub-tree elements so no motivation to activate it on all of them anyway.


-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8960#issuecomment-1684546754 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 18 August 2023 23:28:00 UTC