web-platform-dx / web-features

Exploring how to present Web platform features adoptability
https://web-platform-dx.github.io/web-features/
Apache License 2.0
366 stars 72 forks source link

View Transitions Types #1409

Open hvanops opened 3 months ago

hvanops commented 3 months ago

Specification

https://drafts.csswg.org/css-view-transitions-2/#the-active-view-transition-pseudo

Description

This feature allows View transition API use to be customized for different types of transitions.

Specifically, this adds an ability to add "types" to startViewTransition call which will identify the types of the transition. As well, it will match a pseudo-class, called :active-view-transitions(...) with a parameter matching the type for the duration of the view transition.

Combined these two features provide a way for the author to declare several view transitions once and only trigger one at a time.

Browser support

Firefox signalled positive on this issue: https://github.com/mozilla/standards-positions/issues/905 Safari has not yet responded: https://github.com/WebKit/standards-positions/issues/266

captainbrosset commented 3 months ago

Thanks for filing. The browser data for this was apparently added by Bramus in https://github.com/mdn/browser-compat-data/pull/23067.

I see 2 pseudo-classes, unlike what you said:

  1. :active-view-transition
  2. :active-view-transition-type()

Do you know if both are related to the View Transitions Types feature?

Regarding the types option in startViewTransition(), it looks like it isn't yet available in BCD: https://github.com/mdn/browser-compat-data/blob/main/api/Document.json#L7234. So that would need to be added before adding the feature here.

hvanops commented 3 months ago

Hi,

I was unaware that Bramus added this in BCD, but great to see. It's no problem to wait until it's in BCD before it can be added here.

To answer your other question: Yes - both pseudo classes are relevant to View Transition types. See crbug which also links out to the spec, for more info.

Feel free to close this comment if there's nothing more to do but wait.