Toe Dipping Into View Transitions

I’ll be sincere 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 will animate the transition between two pages, and so they normally begin with the easiest of all examples.

@view-transition {
  navigation: auto;
}

That’s normally the place the simplicity ends and the tutorials enterprise deep into JavaScript territory. There’s nothing mistaken with that, after all, besides that it’s a psychological leap for somebody like me who learns by increase fairly than leaping via. So, I used to be darned impressed after I noticed Uncle Dave and Jim Neilsen buying and selling tips about a brilliant sensible transition: submit titles.

You possibly can see the way it works on Jim’s website:

That is the proper form of toe-dipping experiment I like for attempting 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 will 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 occurring my private weblog:

Excellent little train for a weblog, proper? It begins by setting the view-transition-name on the weather we wish 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 may give 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 will be certain we respect customers preferring decreased movement and solely apply this if their system preferences permit 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 have been the one two components on the web page, then this may work high quality. However what we’ve is a listing of submit hyperlinks and all of them need to have their very own distinctive view-transition-name. That is the place Jim received a bit 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 it’s a must to edit your CSS and provide you with a brand new transition title each time you wish to submit new content material? Nah, there’s received to be a greater manner.

And there may be. Or, at the least there can be. It’s simply not commonplace but. Bramus, the truth is, wrote about it very just lately when discussing Chrome’s work on the attr() operate which is able to have the ability to generate a collection of distinctive identifiers in a single declaration. Try this CSS from the longer term:

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

<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 helpful! 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 properly, so who is aware of after we’ll really get it. For now, the very best wager is to make use of a bit programmatic logic instantly within the template. My website runs on WordPress, so I’ve received entry to PHP and might generate an inline fashion that units the view-transition-name on each components.

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" fashion="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" fashion="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 components instantly inline, utilizing PHP to generate the title based mostly on the submit’s assigned ID in WordPress. One other approach to do it’s to drop a <fashion> tag within the template and plop the logic in there. Each are equally icky in comparison with what attr() will have the ability to do sooner or later, so decide your poison.

The essential factor is that now each components share the identical view-transition-name and that we even have already opted into @view-transition. With these two elements 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 newest situation of Trendy Internet 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 habits with a purpose to permit the transition to run earlier than the enter is checked.