This number is not entering or leaving the DOM, it's just being updated in a counter, but there's still a transition on it, which you can see here. So again, just use this key property here to specify the value that's changing. And it looks like you need to have display in my block for this to work and choose any transition that you want. In this case, it's just an in transition using fly. So let's go ahead and make use of this in our application. Let's grab this. And let's do the same thing for our itemsRemainingCount. So where's that itemsRemaining?

And let's do the same thing for our itemsRemaining count. So where's that itemsRemaining? Okay. Let me just paste in the code. Let's say the key is the remainingToDos. Actually happens twice. So let's grab both of them. Okay. I'm okay with the fly transition. So save that.

Cool. So let's take a look at one more case here. And that's the case when we have no more toDos. So let's delete these. And you'll see that during the last animation, the else block for the empty toDos kicked in. So to see that more clearly, let me update the duration for our fade here. So let's just say duration, three seconds, just so you can see it. Actually, there might be another bug here. Let me try deleting the second one.

So let's see what we can do here. So at first, I tried to delay the animation that happens here on the else block. So let's try that first. Where is it? Right here. So let's go ahead and add a transition on this. But let's delay it. So fade is fine, say transition, fade. But let's delay it. Let's say delay 400.

And we're only interested in introStart and introEnd. So let's get rid of these other two. Let's just console.log something to see it happening. So console.log start, and for end as well. And I'll get rid of this delay as well, since that doesn't help. So let's save that. Let's take a look at that in DevTools in our browser. So let me just remove these toDo this here. Actually, I think we might need that delay. So let me actually put that back.

Actually, I think we might need that delay. So let me actually put that back. But let's make it really long. So let's say four seconds. So I'm going to save that. Let's delete the to dos again. And as I delete this last to do, we should see the logs in the console. So there's the first one. After four seconds, the end should show up. And it does.

And for now, we'll add some JavaScript in here that will hide that toDos container, and only show it after the other animation is done. So let's grab both of these here. And for now, I'm just going to do a querySelector, so document.querySelector. And I want to grab the noToDos container. And let's set a style on it. So when it starts, I don't want it to show. So we can say .style equals display: none. And then when it's done, we can say display: block. And hopefully that fixes our issue with that container.

And then when it's done, we can say display: block. And hopefully that fixes our issue with that container. So style equals display: block. Let's try that out. Hopefully that fixes it. Sorry, I have a typo here. There should be no style. So let's remove that. And I also need a . here. Okay, let's try that out, save that.

One more time. Let's delete these. And it does work. Now this works fine, but usually you don't want to reach into the DOM and manipulate it that way. So let's get rid of this and make a reference to this DOM selector. So let's replace this. We'll make a variable named noToDosContainer.

So let's replace this. We'll make a variable named noToDosContainer. Let's go ahead and make that in our style block, or sorry, our script block up here somewhere. Let's just put it down here. Let's say let noToDosContainer. And to make a reference to that, let's go to that actual DOM element, noToDosContainer. We can say bind this to noToDosContainer. Okay, let's save that.

you don't even have to write any CSS, which is nice. Let's go ahead and make a commit here. Let's say git add, git commit. This is episode four, Svelte transitions.