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.
varieties
?
What do folks say about 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.
varieties
descriptor is used extra in JavaScript
The 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:
- Handed as a part of the arguments to
startViewTransition(callbackOptions)
- Mutated at any time, utilizing the transition’s varieties
- 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: