Let's take a look at a more practical use case of CSS view transitions where we have a list of blog posts and when we click on one of the titles, it's going to transition to the single view page. Here's a list of articles coming from the database and when I navigate to one of the posts, we just fade in, fade out, transition, uh, to that post. Now if we look at the markup, things are a bit more interesting here. First of all, we are looping through posts in the database,

things are a bit more interesting here. First of all, we are looping through posts in the database, but what you can see is that the post title is actually an anchor tag here that is on the list view. But if I visit the single post page, which is this one, you can see that the title is an H one tag. So it appears that we're going to try to transition an anchor tag into a H one tag and the good news is it's totally doable.

to transition an anchor tag into a H one tag and the good news is it's totally doable. Why don't we try the same technique that we've done for the squares where we have a view transition name matching on the old and new page. So if I scroll down here, you would see that we have the articles and the UL anchor tag here could be our target. So the anchor tag, let's try to give it a view transition name of post title

So the anchor tag, let's try to give it a view transition name of post title that sounds reasonable. So that's on the list page, but we also want to give the same view transition name to the title on the single post. And so if I scroll down, sure enough we have article H one, not the most scalable CSS, but this should uh, target what we want because we only have an H one on the article page.

but this should uh, target what we want because we only have an H one on the article page. And so here, let's give it the same view transition name post title. Alright, let's give that a shot. So I'm going to click on one of the links and doesn't seem to be working at this point. And this is the gotcha I was talking about in the previous lesson. We need to have a unique view transition name

about in the previous lesson. We need to have a unique view transition name that is only present once on the page right now each of our titles here has the same transition name, so it's present more than once and that's what's breaking the transition from happening. So let's get rid of our view transition name in CSS here. And what we want to do here is to have a dynamic view transition name that is different for each post.

to have a dynamic view transition name that is different for each post. So something like post title dash one and then dash two and dash three and so on. This is sort of rough to do with CSS, but what we can do is drop to the template level and use an inline style to pass our styles and use a dynamic value inside of there. Let's go in the view transition page three, which is the listing here.

Let's go in the view transition page three, which is the listing here. And check this out. We can have an inline style here style and we are going to define a view transition name and we can stick to our post title, but we are going to append dash and then in here use the post ID coming from the database. You can see that we are already using this post ID for the link to the individual post. So this is a perfect use case.

for the link to the individual post. So this is a perfect use case. And now if I inspect the titles, they should all have the view transition name post title two, and then if I look at another one, it's going to have post title five. This sounds perfect. So this is still not going to work and hopefully you understand why. What happens is we have unique

and hopefully you understand why. What happens is we have unique view transition names on all the titles, but our title here doesn't have yet the matching view transition name. So I need to go in the view transition dash four file. And here like we did for the anchor tag on the list, we are going to apply an inline style style equals view transition name post title dash post id. So now if I inspect this, it's also going

transition name post title dash post id. So now if I inspect this, it's also going to have the relevant post title id. And so with a bit of luck when we navigate aha, did you see this, the H one tag smoothly transition to the anchor tag on the other page, let's take a look at another link and it's looking really cool. I wanna make a quick note on some CSS that I wrote to make this transition a little bit smoother

I wanna make a quick note on some CSS that I wrote to make this transition a little bit smoother because we are animating from an anchor tag, which is an inline element to an H one tag, which is a block level element. If we look at our styles for the articles and we check the H one, you can see that I've added display inline block. Let me comment that out and I will also slow down the animation duration.

Let me comment that out and I will also slow down the animation duration. Let's make it two seconds. And I watch what happens when we transition from the list to the individual post. Did you see that? Uh, essentially the tries to animate with the target of block level, which is the full width, but then realizes that it actually does not. And so there is this mismatch in terms of width, but if we enable display inline block, the browser is going

And so there is this mismatch in terms of width, but if we enable display inline block, the browser is going to understand that it's the content width that defines the width of the final transition. And so the animation is going to be much smoother. All right, I've got one more cool trick for you that I think you're gonna like and then we're gonna wrap up this lesson. Let me quickly remove the animation duration override. And I wanna draw your attention to the navigation up there

Let me quickly remove the animation duration override. And I wanna draw your attention to the navigation up there specifically the black underline for the active state. So if I go to page two, this is the second element that has the black border. And actually this is not a border, let me show you. The way it's being implemented here is with a data active after pseudo element for each page. I have one of the link that has a data active equals true attributes.

I have one of the link that has a data active equals true attributes. And so in that case we have an after element which is absolutely positioned and it's a four pixel high full with black bar. And actually we don't need the color white. And so check this out. Technically we'll only ever have one element that has a data active true attribute. Uh, and it's going to be different in the old and new page, but there is only going to be one.

Uh, and it's going to be different in the old and new page, but there is only going to be one. So if we give it a matching view transition name, maybe you can imagine what's gonna happen. We should have the after element transition from the original position to the new position. Let's try it. All I'm going to do is give that element the data active selector, a view transition name of active nav.

that element the data active selector, a view transition name of active nav. This could be anything. And so that name should travel along with the data active element. And so with a bit of luck when we navigate to another page, we should have this nice sliding animation and we do, let's try go back. How cool is that? Alright, we've barely scratched the surface of what you can do

How cool is that? Alright, we've barely scratched the surface of what you can do with CSS view transitions. And like I said, there's also a JavaScript View Transitions API. This stuff is incredible. I really encourage you to dig into that. It's not completely supported just yet, but specifically if you just use CSS View transitions, you can and should consider this a progressive enhancement.

but specifically if you just use CSS View transitions, you can and should consider this a progressive enhancement. If a browser doesn't support it, well, this would be the exact same that if you didn't bother with view transitions at all in the first place. But if you enable them for those who can, then you add some delights to those who can see it and those who can't, well just don't get anything and they get the same regular experience that they would anyway.

and they get the same regular experience that they would anyway. So play with it. Let me know how you go and I will see you in the next lesson.