Toe Dipping Into View Transitions

Frankly, the View Transition API is a bit daunting for me. Many tutorials show impressive demonstrations on how we animate the conversion between two pages, which usually start with the simplest example:

@view-transition {
  navigation: auto;
}

But this is usually the end of the simple part, and the tutorial then digs into the JavaScript realm. Of course, this is nothing wrong, but it's a huge leap for someone like me who learns step by step. So, I was inspired when I saw Uncle Dave and Jim Neilsen share about a very practical conversion technique (the title).

You can see how it works on Jim's website:

This is exactly the perfect "snack" experiment where I like to try new things. It starts with the same @view-transition code snippet that is used to join both pages to the View Transitions API: the current page and the page you want to navigate to. From here we can think of them as "new" and "old" pages, respectively.

I also achieved the same effect on my personal blog:

This is a perfect exercise for a blog, right? It first sets view-transition-name on the element we want to participate in the conversion, in this case the article title on the "old" page and the article title on the "new" page.

So if our tags are as follows:

<h1>Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

…We can give them the same view-transition-name in CSS:

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

Dave quickly pointed out that we can ensure respect for users who prefer to reduce exercise and that this setting is applied only if their system preferences allow exercise:

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

If there are only these two elements on the page, then this will work properly. But we have a list of article links, all of which must have their own unique view-transition-name. That's where Jim has some difficulties in his work because how exactly do you do this when it comes to publishing new blog posts? Do you have to edit your CSS and come up with a new conversion name every time you want to post new content? No, there must be a better way.

It does. Or, at least in the future. It's just not standard yet. In fact, Bramus wrote this recently while discussing Chrome's work on the attr() function, which will be able to generate a series of unique identifiers in a declaration. Look at this future CSS:

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

Great! I want to use it now! It's a pity that not only has to wait for Chrome to develop it, but also for other browsers to adopt and implement it, so who knows when we can actually get it. At the moment, the best way is to use some programming logic directly in the template. My website runs on WordPress so I can access PHP and generate an inline style that sets view-transition-name on both elements.

Article title is in the template for my individual blog post. In WordPress jargon, that is the single.php file.

@view-transition {
  navigation: auto;
}

Article links are located in the template of the article archive. In WordPress, this is usually archive.php:

<h1>Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

See what happened there? The view-transition-name attribute is set directly on two conversion elements inline, using PHP to generate names based on the assigned ID of the article in WordPress. Another way is to add a <style></style> tag to the template and put the logic there. Both methods are equally clumsy compared to what you can achieve in the future, so choose the one you like. attr()

Importantly, now these two elements share the same

and we have joined view-transition-name. With these two elements, the conversion can work! We don't even need to define @view-transition (but you can) because the default conversion does all the heavy lifting. @keyframes

In the same "slight taste" spirit, I saw the latest issue of Modern Web Weekly, and I like to use this little View Transition on the radio button:

Note that JavaScript is required to block the default click behavior of radio buttons so that the conversion is allowed to run before entering is selected.

The above is the detailed content of Toe Dipping Into View Transitions. For more information, please follow other related articles on the PHP Chinese website!