What on Earth is the `types` Descriptor in View Transitions?

Ever researched something new only to find scant information? That's the frustrating yet exciting paradox of exploring uncharted digital territory. I recently encountered this while documenting the @view-transition at-rule and its types descriptor.

You're likely familiar with cross-document view transitions: CSS-powered transitions between web pages, previously requiring JavaScript frameworks and animation libraries. Initiating a transition involves setting the navigation descriptor to auto on both pages, creating a smooth cross-fade effect.

@view-transition {
  navigation: auto;
}

Simple, right? navigation is the commonly known descriptor. But there's another, less documented sibling: the types descriptor.

Understanding the types Descriptor

Cross-document view transitions are relatively new, so comprehensive exploration is ongoing. Surprisingly, the types descriptor often gets overlooked; some documentation omits it entirely. The CSS specification provides this clarification:

The types descriptor sets the active types for the transition when capturing or performing the transition.

More specifically, types accepts a space-separated list of active type names (as <custom-ident></custom-ident>) or none if no active types apply.

• Name: types
• For: @view-transition
• Value: none | <custom-ident> </custom-ident>
• Initial: none

Example usages:

@view-transition {
  navigation: auto;
  types: bounce;
}

/* Or a list */
@view-transition {
  navigation: auto;
  types: bounce fade rotate;
}

But what are "active" types? Let's delve deeper.

Active Types: Tailoring Transitions

The Challenge: A universal cross-fade animation is useful, but often we need transition customization based on navigation context. For example, paginated content might slide right/left, while a social media profile click could persist the profile image during the transition. Defining multiple transitions directly leads to conflicts. We need selective transition activation.

The Solution: Active types determine which transition executes and which elements participate. In CSS, the :active-view-transition-type() pseudo-class targets elements with a specific active type. If we define bounce as the active type, the bounce animation is activated only when the :active-view-transition-type(bounce) condition is met.

@view-transition {
  navigation: auto;
}

This prevents conflicting transitions. Importantly, this only affects transitions to the page, not transitions away from it, enabling customized transitions based on destination page.

A demo showcasing bounce and slide transitions, controlled via the types descriptor, is available here. The full code is on GitHub [link-to-github].

JavaScript's Enhanced Role

CSS alone limits control to transitions based on the destination page. More complex scenarios, like our pagination and social media examples, require knowing the source page. Active types can be populated in three ways:

1. Via startViewTransition(callbackOptions) arguments.
2. Dynamically mutated using the transition's types property.
3. Declared using the types descriptor (as discussed above).

Option 2, using the pagereveal event, allows on-demand active type setting, enabling context-aware transitions based on both source and destination pages. Further exploration of this method is warranted.

For deeper dives into active types and view transitions, see:

• View transition types in cross-document view transitions (Bramus)
• Customize the direction of a view transition with JavaScript (Umar Hansa)

The above is the detailed content of What on Earth is the `types` Descriptor in View Transitions?. For more information, please follow other related articles on the PHP Chinese website!