js transitions? Not as difficult as you might have first thought, right? Well, in this lesson, let me share with you a little tip that a lot of people don't realize about transitions, even those who have been working with them for a long time. The tip is this.
You're not limited to adding the transition to the single root element that's being shown or hidden. You could also add transitions to any element nested within that. A perfect example of this that I've run into is a modal overlay. Oftentimes, the modal overlay will have both a background that kind of grays out everything else on the page, as well as an actual box that is the modal itself.
Oftentimes, you want to animate these just slightly differently. So how would we do this with view transitions? Well, I've already got the styles set up for us. Let's go over what they're doing.
4 seconds. This will allow the background to fade in just a little bit before the actual box slides down. Then I'm doing the exact opposite for the modal background on leave. I want it on the way out to delay 4 seconds.
That way the box can move up and out. before the background ever starts fading away. Next, I'm using venter from just on the modal background for this rule. And then vleave to also just on the modal background.
So essentially this makes it where the background only fades in and out. It doesn't do any other transitions. Lastly, I'm using venter from and vleave to on just the model. And it's going to do more than just fade in and out.
It's also going to translate up the page negative 30 pixels, so it's going to start 30 pixels higher at the beginning of the transition, allowing the box to move down when it's shown on the page, and then move back up again when it's removed from the page. Excellent. Let's see what that looks like in the browser. Sure enough, when I click Show Modal, the transitions look great.
The background fades in, and then the modal box itself just a little later slides in down from the top and fades in as well. Now let's go to close the modal overlay. Oh, that's not quite as hot. It just disappears immediately.
But why? We have VLeave2 on both the modal and the modal background. Well, by default, the transition component attempts to automatically figure out when the transition is finished by listening to the first transitioned end or animation end event on the root transition element. But with a nested transition, the desired behavior should be waiting until the transitions of all the inner elements has finished.
Therefore, we need to explicitly specify a transition duration using the duration prop on the transition component. This value here should be in milliseconds and should be the total duration of all of our inner elements. 4 seconds that we've added to the delay on enter and leave for the different inner elements. 4 seconds, which would be 1400 milliseconds.
Notice I did have to provide the colon at the beginning of this prompt so that this evaluates as a proper number and not as a string. Great. Let's give that a save, refresh my page for good measure, and try it one last time. Very, very nice.
js transitions? Not as difficult as you might have first thought, right? Well, in this lesson, let me share with you a little tip that a lot of people don't realize about transitions, even those who have been working with them for a long time. The tip is this.
You're not limited to adding the transition to the single root element that's being shown or hidden. You could also add transitions to any element nested within that. A perfect example of this that I've run into is a modal overlay. Oftentimes, the modal overlay will have both a background that kind of grays out everything else on the page, as well as an actual box that is the modal itself.
Oftentimes, you want to animate these just slightly differently. So how would we do this with view transitions? Well, I've already got the styles set up for us. Let's go over what they're doing.
4 seconds. This will allow the background to fade in just a little bit before the actual box slides down. Then I'm doing the exact opposite for the modal background on leave. I want it on the way out to delay 4 seconds.
That way the box can move up and out. before the background ever starts fading away. Next, I'm using venter from just on the modal background for this rule. And then vleave to also just on the modal background.
So essentially this makes it where the background only fades in and out. It doesn't do any other transitions. Lastly, I'm using venter from and vleave to on just the model. And it's going to do more than just fade in and out.
It's also going to translate up the page negative 30 pixels, so it's going to start 30 pixels higher at the beginning of the transition, allowing the box to move down when it's shown on the page, and then move back up again when it's removed from the page. Excellent. Let's see what that looks like in the browser. Sure enough, when I click Show Modal, the transitions look great.
The background fades in, and then the modal box itself just a little later slides in down from the top and fades in as well. Now let's go to close the modal overlay. Oh, that's not quite as hot. It just disappears immediately.
But why? We have VLeave2 on both the modal and the modal background. Well, by default, the transition component attempts to automatically figure out when the transition is finished by listening to the first transitioned end or animation end event on the root transition element. But with a nested transition, the desired behavior should be waiting until the transitions of all the inner elements has finished.
Therefore, we need to explicitly specify a transition duration using the duration prop on the transition component. This value here should be in milliseconds and should be the total duration of all of our inner elements. 4 seconds that we've added to the delay on enter and leave for the different inner elements. 4 seconds, which would be 1400 milliseconds.
Notice I did have to provide the colon at the beginning of this prompt so that this evaluates as a proper number and not as a string. Great. Let's give that a save, refresh my page for good measure, and try it one last time. Very, very nice.