Animating List Items

[00:00:00]
>> Kevin Powell: So, we have another opportunity now to fancy this animation up even more, because when we're doing this with our starting styles and all of that, while we're changing the display to block and hidden of the navigation itself, that hides and shows all of the children as well.

[00:00:16]
So we can actually take advantage of that to add animations or transitions to the list items if we wanted to. Because right now, when I click on this, and it slides down and then slides out, what we could do is actually have the individual list items animating as well.

[00:00:31]
So, let's say we came on the primary navigation that's right here, and I'm just want to select the list item. So let's actually go to my regular ones first. I just wanna be in my primary navigation. There's my uL, so we'll come right here. Let's just say Li, and we'll do a translate of 50%,just to see what that does.

[00:00:56]
So when we open it, sort of shoved off to the side a little bit, and we can come and say this has a transition: translate and I'll just do 1s, I'm doing two there so it's the transition plus a delay. Don't keep these are way too long for things like menus you do want users to be able to interact with put them pretty quickly, but for educational purposes, I'm going pretty slow with these.

[00:01:24]
So, we're going to transition that translate, and we can do that, by coming here, where we have that primary navigation, when it's opened, the Li can then have a translate of 00. So, ideally, it would actually be doing that transition that we've run into that same problem that we had before, where even though it's the parent that's display none, all the children in there are also display none, just because the parent isn't there.

[00:01:58]
So they're getting added to the Page 2. So on here, we can also add a starting style.
>> Kevin Powell: And then, translate 0 50%, I think is what we want.
>> Kevin Powell: [LAUGH] wrong way, that was kind of cool actually. That was completely accidental but I kind of like that.

[00:02:18]
[LAUGH] nice. We'll do it the other way, negative 50%, it probably 0. And then so when I open them, The other way, and then they can slide in we'll do it. One more time, and then we can have them slide in a little bit. Of course, if we're doing that, it would also make sense for the starting-style here, actually have no opacity of 0, and then this would go up to an opacity of 1.

[00:02:51]
So, we don't see them until they start sliding in. And then, also just means up here, I also wanna do my opacity, and for now, we'll do the 1s, 1s. So leaves, comes in, Oop!, I broke something. Transition, translate opacity.
>> Speaker 2: Semicolon after your opacity.
>> Kevin Powell: Thank you.

[00:03:17]
Appreciate that.
>> Kevin Powell: Now, I broke something else. There we go, and then they slide in. Not the coolest thing I like the sort of the drop down I might change it after. [LAUGH] To be the other way, where they sort of bounced upwards that was kind of neat.

[00:03:33]
But, we'll stick with what I was doing here, because there's one more thing that we can do just to make it look a little bit cooler, at the same time where we come all the way back up. And, what I would do is, on these, I would instead of having the delay set like I'm setting it right now, what we could do is come in with an animation, or we'll just call it delay.

[00:03:56]
It's going to be a bit faster, and so my delay as a default could be one second. And then so this is my delay here, var (--- delay) and var (--- delay), so everything should be exactly the same as it was. And then they all slide in with that delay on there.

[00:04:20]
But then I could say that I have my li nth child (2). And, we could say the delay is now 1.25s, let's say. And li nth child(3), has a delay of 1.5 seconds. And again, if you're doing this, please use faster times cuz users don't wanna wait that long for their animation or for their menu to come in.

[00:04:48]
And then we get a nice little, [LAUGH] animation. Again, another nice little use case for custom properties there just to add this little staggering effect. If you had tons of elements and you needed them to sort of slide in, that might be a good use case for JavaScript too, just to loop through, and you could do a set the delays through a just a style attribute on each one of them.

[00:05:13]
But if you just have three elements, it's easy enough to do it within the child like this.