Page View Transitions

[00:00:00]
>> Kevin Powell: All right, so the first progressive enhancement we're gonna be taking a look at is view transitions. And I do want to just preface this a little bit that we're only gonna be touching on the basics of view transitions. They're really cool. You can do awesome stuff with them without getting deep into them.

[00:00:15]
But it's also a huge and really deep topic that if you like what we cover in here I Strongly suggest you learn, dive in and learn a bit more about them. And there's two important things. There's two different types of view transitions. There's same document view transitions and cross document view transitions.

[00:00:31]
We're gonna be looking at both of them. It's a fancy name, same document to cross document. Just is it within the page and you're updating things on the page? Or is it between page when you're navigating from one page to another, so cross document is when you use your navigation to go to a completely different page.

[00:00:48]
So it's a really deep topic. You can dive way more in, but we're gonna start with adding a cross document view transition because this is the easiest thing in the world, where in your CSS, come all the way to the top. We'll do this in our base actually, I'm gonna do it, it's an at rule.

[00:01:06]
I'll just throw it at the very top. I don't know where I would actually put this and at view Transition Navigation Auto, and it's basically opt-in by doing it like this. And so now, if I'm on my page and I go to a different page, you can actually see it cross-fades from one page to the other.

[00:01:32]
And that's all I had to do was adding that view transition at rule at the top of my page and the navigation of auto. There's nothing else, it just works. And the default is the cross fade that we were seeing. You can control the two pages separately, so the one exiting, the one entering.

[00:01:50]
There's a lot you can do with this, just to show you one of the things you can do with it. It's called a view-transition-group. And it looks like this, it's kind of weird looking, and I'm going to put root here, because I'm selecting the root of my document right now.

[00:02:07]
It is the HTML that we're looking at that's transitioning between the two pages. And let's just do an animation duration of three seconds. And so now, if I I switch between pages, it takes three seconds to cross fade from one to the other, nothing too fancy. I wouldn't suggest slowing it down by that much, but it just shows you you're just hooking into regular animations the same way you do before.

[00:02:32]
So you could do an animation that slides one page in and slides the other one out. I'm doing a view transition group. So it's taking both the old page and the new page, it's treating them as one. If you wanted different animations for both of them, you have your view, transition, old and new.

[00:02:53]
So the new of the root is the new page that you're navigating to. And the old one, if you did the old here, would be the page that you're leaving. So you could do a transition in one direction, transition for the other, and the pages could actually slide, or you could do other things that way.

[00:03:08]
We're not gonna dive too deep into them, as I said, you can use animations to control everything that's going on. I'm just going to leave the default one there at the top, and if it's something you want to use to enhance. It's the page, or play around with it a little bit more, you definitely can.

[00:03:24]
The other thing really quickly, the root is a default one. You can also add view transition names as a property to elements, and then you can transition individual things as well. It gets really powerful, where you could have, like, the name of a card that you're clicking on becomes the title somewhere else, and it animates to that.

[00:03:40]
Position and it just works out of the box. It's really, really cool and how easy it is just throwing this at the top of the page and it working. You will notice that it gets a little squiggly here because VSCode doesn't recognize it. So we're getting a syntax error but as we can see it does work.

[00:03:56]
And this is a really nice progressive enhancement cause if it doesn't work and the browser doesn't understand what that. That is, it doesn't break anything, they just get a regular page load, and it just jumps. But if it does work, then it will transition from one to the other, and it's a little busted there.

[00:04:14]
Let's refresh the page and hopefully get the transition coming in. We saw it before, we knew it works. [LAUGH] It doesn't wanna animate now, I don't know what I did, there we go, it's back. So we can transition back and forth.