Tuesday, April 22, 2025
HomeProgrammingToe Dipping Into View Transitions

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 probably the most spectacular demos exhibiting how we are able to animate the transition between two pages, and so they often begin with the easiest 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 improper with that, in fact, besides that it’s a psychological leap for somebody like me who learns by build up slightly than leaping by means of. So, I used to be darned impressed after I noticed Uncle Dave and Jim Neilsen buying and selling tips about a brilliant sensible transition: put up titles.

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

That is the proper type 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 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 wish to take part within the transition which, on this case, is the put up title on the “previous” web page and the put up 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 are able to be certain we respect customers preferring lowered movement and solely apply this if their system preferences enable for movement:

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

If these have been the one two parts on the web page, then this might work high quality. However what we now have is a listing of put up hyperlinks and all of them must have their very own distinctive view-transition-name. That is the place Jim acquired a little 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 important to edit your CSS and provide you with a brand new transition title every time you wish to put up new content material? Nah, there’s acquired to be a greater manner.

And there’s. Or, at the very least there might be. It’s simply not customary but. Bramus, in truth, wrote about it very just lately when discussing Chrome’s work on the attr() operate which can be capable to generate a sequence of distinctive identifiers in a single declaration. Take a look at this CSS from the long run:

<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 need 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 once we’ll truly get it. For now, one of the best guess is to make use of a little bit programmatic logic immediately within the template. My web site runs on WordPress, so I’ve acquired entry to PHP and may generate an inline fashion that units the view-transition-name on each parts.

The put up 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 put up hyperlinks are within the template for put up 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 occurring there? The view-transition-name property is ready on each transition parts immediately inline, utilizing PHP to generate the title based mostly on the put up’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 be capable to do sooner or later, so choose your poison.

The essential 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 have to 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 challenge of Fashionable Net Weekly and love this little sprinkle of view transition on radio inputs:

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

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments