Thursday, January 30, 2025
HomeProgrammingWhat On Earth Is The `varieties` Descriptor In View Transitions?

What On Earth Is The `varieties` Descriptor In View Transitions?


Have you ever ever stumbled upon one thing new and went to analysis it simply to seek out that there’s little-to-no details about it? It’s a blended feeling: complicated and discouraging as a result of there is no such thing as a obvious course, but in addition thrilling as a result of it’s in all probability new to a lot of folks, not simply you. One thing like that occurred to me whereas writing an Almanac’s entry for the @view-transition at-rule and its varieties descriptor.

You could already find out about Cross-Doc View Transitions: With a number of strains of CSS, they permit for transitions between two pages, one thing that previously required a single-app framework with a facet of animation library. In different phrases, a lot of JavaScript.

To begin a transition between two pages, we now have to set the @view-transition at-rule’s navigation descriptor to auto on each pages, and that offers us a clean cross-fade transition between the 2 pages. So, because the previous web page fades out, the brand new web page fades in.

@view-transition {
  navigation: auto;
}

That’s it! And navigation is the one descriptor we’d like. Actually, it’s the one descriptor obtainable for the @view-transition at-rule, proper? Effectively, seems there’s one other descriptor, a lesser-known brother, and one which in all probability envies how a lot consideration navigation will get: the varieties descriptor.

What do folks say about varieties?

Cross-Paperwork View Transitions are nonetheless contemporary from the oven, so it’s regular that individuals haven’t absolutely dissected each side of them, particularly since they introduce a lot of latest stuff: a brand new at-rule, a few new properties and tons of pseudo-elements and pseudo-classes. Nevertheless, it nonetheless surprises me the little point out of varieties. Some documentation fails to even title it among the many legitimate  @view-transition descriptors. Fortunately, although, the CSS specification does supply somewhat clarification about it:

The varieties descriptor units the energetic varieties for the transition when capturing or performing the transition.

To be extra exact, varieties can take a space-separated listing with the names of the energetic varieties (as <custom-ident>), or none if there aren’t legitimate energetic varieties for that web page.

  • Title: varieties
  • For: @view-transition
  • Worth: none | <custom-ident>+
  • Preliminary: none

So the next values would work inside varieties:

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

/* or a listing */

@view-transition {
  navigation: auto;
  varieties: bounce fade rotate;
}

Sure, however what precisely are “energetic” varieties? That phrase “energetic” appears to be doing lots of heavy lifting within the CSS specification’s definition and I wish to unpack that to raised perceive what it means.

Lively varieties in view transitions

The issue: A cross-fade animation for each web page is sweet, however a standard factor we have to do is change the transition relying on the pages we’re navigating between. For instance, on paginated content material, we might slide the content material to the correct when navigating ahead and to the left when navigating backward. In a social media app, clicking a person’s profile image might persist the image all through the transition. All this could imply defining a number of transitions in our CSS, however doing so would make them battle with one another in a single huge slop. What we’d like is a strategy to outline a number of transitions, however solely decide one relying on how the person navigates the web page.

The answer: Lively varieties outline which transition will get used and which parts needs to be included in it. In CSS, they’re used via :active-view-transition-type(), a pseudo-class that matches a component if it has a particular energetic sort. Going again to our final instance, we outlined the doc’s energetic sort as bounce. We might enclose that bounce animation behind an :active-view-transition-type(bounce), such that it solely triggers on that web page.

/* This one will likely be used! */
html:active-view-transition-type(bounce) {
  &::view-transition-old(web page) {
    /* Customized Animation */
  }

  &::view-transition-new(web page) {
    /* Customized Animation */
  }
}

This prevents different view transitions from working in the event that they don’t match any energetic sort:

/* This one will not be used! */
html:active-view-transition-type(slide) {
  &::view-transition-old(web page) {
    /* Customized Animation */
  }

  &::view-transition-new(web page) {
    /* Customized Animation */
  }
}

I requested myself whether or not this triggers the transition when going to the web page, when out of the web page, or in each situations. Seems it solely limits the transition when going to the web page, so the final bounce animation is just triggered when navigating towards a web page with a bounce worth on its varieties descriptor, however not when leaving that web page. This permits for {custom} transitions relying on which web page we’re going to.

The next demo has two pages that share a stylesheet with the bounce and slide view transitions, each respectively enclosed behind an :active-view-transition-type(bounce) and :active-view-transition-type(slide) just like the final instance. We are able to management which web page makes use of which view transition via the varieties descriptor.

The primary web page makes use of the bounce animation:

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

The second web page makes use of the slide animation:

@view-transition {
  navigation: auto;
  varieties: slide;
}

You may go to the demo right here and see the full code over at GitHub.

The varieties descriptor is used extra in JavaScript

The primary downside is that we are able to solely management the transition relying on the web page we’re navigating to, which places a significant cap on how a lot we are able to customise our transitions. For example, the pagination and social media examples we checked out aren’t potential simply utilizing CSS, since we have to know the place the person is coming from. Fortunately, utilizing the varieties descriptor is only one of three ways in which energetic varieties may be populated. Per spec, they are often:

  1. Handed as a part of the arguments to startViewTransition(callbackOptions)
  2. Mutated at any time, utilizing the transition’s varieties
  3. Declared for a cross-document view transition, utilizing the varieties descriptor.

The primary possibility is when beginning a view transition from JavaScript, however we wish to set off them when the person navigates to the web page by themselves (like when clicking a hyperlink). The third possibility is utilizing the varieties descriptor which we already coated. The second possibility is the correct one for this case! Why? It lets us set the energetic transition sort on demand, and we are able to carry out that change simply earlier than the transition occurs utilizing the pagereveal occasion. Which means we are able to get the person’s begin and finish web page from JavaScript after which set the proper energetic sort for that case.

I need to admit, I’m not essentially the most skilled man to speak about this selection, so as soon as I demo the heck out of various transitions with energetic varieties I’ll come again with my findings! Within the meantime, I encourage you to examine energetic varieties right here if you’re like me and wish extra on view transitions:

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments