Toe Dipping Into View Transitions

I’ll be trustworthy and say that the View Transition API intimidates me greater than a smidge. There are many tutorials with essentially the most spectacular demos displaying how we are able to animate the transition between two pages, they usually often begin with the simplest of all examples.

@view-transition {
  navigation: auto;
}

That’s often the place the simplicity ends and the tutorials enterprise deep into JavaScript territory. There’s nothing flawed with that, in fact, besides that it’s a psychological leap for somebody like me who learns by increase relatively than leaping by means of. So, I used to be darned impressed after I noticed Uncle Dave and Jim Neilsen buying and selling recommendations on an excellent sensible transition: submit titles.

You’ll be able to see the way it works on Jim’s web site:

That is the right form of toe-dipping experiment I like for making an attempt new issues. And it begins with the identical little @view-transition snippet which is used to decide each pages into the View Transitions API: the web page we’re on and the web page we’re navigating to. From right here on out, we are able to consider these because the “new” web page and the “previous” web page, respectively.

I used to be in a position to get the identical impact happening my private weblog:

Excellent little train for a weblog, proper? It begins by setting the view-transition-name on the weather we need to take part within the transition which, on this case, is the submit title on the “previous” web page and the submit title on the “new” web page.

So, if that is our markup:

<h1 class="post-title">Notes</h1>
<a category="post-link" href="https://css-tricks.com/link-to-post"></a>

…we can provide them the identical view-transition-name in CSS:

.post-title { view-transition-name: post-title; }
.post-link { view-transition-name: post-title; }

Dave is fast to level out that we are able to ensure that we respect customers preferring lowered movement and solely apply this if their system preferences enable for movement:

@media not (prefers-reduced-motion: scale back) {
  .post-title { view-transition-name: post-title; }
  .post-link { view-transition-name: post-title; }
}

If these had been the one two parts on the web page, then this might work effective. However what we have now is an inventory of submit hyperlinks and all of them must have their very own distinctive view-transition-name. That is the place Jim obtained a bit of caught in his work as a result of how within the heck do you accomplish that when new weblog posts are printed on a regular basis? Do you must edit your CSS and provide you with a brand new transition title every time you need to submit new content material? Nah, there’s obtained to be a greater means.

And there may be. Or, no less than there will probably be. It’s simply not customary but. Bramus, in reality, wrote about it very not too long ago when discussing Chrome’s work on the attr() function which is able to be capable to generate a sequence of distinctive identifiers in a single declaration. Try this CSS from the longer term:

<type>
  .card[id] {
    view-transition-name: attr(id sort(<custom-ident>), none); /* card-1, card-2, card-3, … */
    view-transition-class: card;
  }
</type>

<div class="playing cards">
  <div class="card" id="card-1"></div>
  <div class="card" id="card-2"></div>
  <div class="card" id="card-3"></div>
  <div class="card" id="card-4"></div>
</div>

Daaaaa-aaaang that’s going to be useful! I would like it now, darn it! Gotta have to attend not just for Chrome to develop it, however for different browsers to undertake and implement it as effectively, so who is aware of once we’ll really get it. For now, the most effective guess is to make use of a bit of programmatic logic straight within the template. My web site runs on WordPress, so I’ve obtained entry to PHP and might generate an inline type that units the view-transition-name on each parts.

The submit title is within the template for my particular person weblog posts. That’s the single.php file in WordPress parlance.

<?php the_title( 
  '<h1 class="post-single__title" type="view-transition-name: post-' . get_the_id() . '">', '</h1>'
); ?>

The submit hyperlinks are within the template for submit archives. That’s usually archive.php in WordPress:

<?php the_title(
  '<h2 class="post-link><a href="' . esc_url( get_permalink() ) .'" rel="bookmark" type="view-transition-name: post-' . get_the_id() . '">', '</a></h2>' 
); ?>

See what’s taking place there? The view-transition-name property is about on each transition parts straight inline, utilizing PHP to generate the title primarily based on the submit’s assigned ID in WordPress. One other technique to do it’s to drop a <type> tag within the template and plop the logic in there. Each are equally icky in comparison with what attr() will be capable to do sooner or later, so decide your poison.

The vital factor is that now each parts share the identical view-transition-name and that we even have already opted into @view-transition. With these two substances in place, the transition works! We don’t even must outline @keyframes (however you completely might) as a result of the default transition does all of the heavy lifting.

In the identical toe-dipping spirit, I caught the most recent concern of Modern Web Weekly and love this little sprinkle of view transition on radio inputs:

Discover the JavaScript that’s wanted to stop the radio’s default clicking conduct so as to enable the transition to run earlier than the enter is checked.