Animate Entry And Exit Transitions With Modern CSS

Hey friends, in today's video I'm going to show you how you can have starting and exit styles using at starting style in CSS, which by this point is supported by every major browser. And I'm also going to show you the underrated advantage of using CSS transitions over keyframes. And the best part of this approach is that we don't have to use JavaScript to toggle some classes or etc. Using keyframes for enter animations in CSS shouldn't be anything new. In this example, here we have some boxes and in the styles we define these fade in keyframes with a from and two keyframes. Now for the box element we're going to define the animation. For the animation itself, we can say fade in and backwards, so we get the first frame of the keyframes. Otherwise, it would default to the default element styles. And then for the delay, we can use the sibling index, which is a new feature of CSS. This should now give us a beautiful fading transition. And if you don't know, the sibling index is a relatively new CSS function which returns an integer representing the position of the current element in the DOM tree. So this basically lets us number the DOM elements without having to specify it ourselves or using a CSS variable. And it's widely supported by most browsers besides Firefox at the moment. But let's get back to our actual example. So now that we look at keyframes, let's look at CSS transitions. In this example, instead of keyframes, we're going to use at starting style, which is going to let us define the starting styles for an element. So in this example, we also have some boxes. We're going to transition the opacity and translate properties. And then for the transition delay, we're going to use the same sibling index trick as before. But now instead of defining keyframes, we're going to define a new at starting style rule. So we want to say for the box that the initial style should be opacity zero and the translate should be zero on the x-axis and 20 pixels on the y-axis. And here we're using CSS nesting, so you don't have to repeat the box style. All right, so now that we've defined the starting style, we should see our transition work. So what's happening here is that the styles are going to smoothly animate to their original values. So the opacity is going to go from zero to one and translate is going to go from 20 pixels on the y-axis to zero pixels on the y-axis. How beautiful is this, friends? But you also might be asking yourself, what is the point of using CSS transitions when keyframes can already do it? The underrated advantage of using CSS transitions over keyframes is that we can cancel transitions. So let me show you through an example. In this example, I'm going to toggle the keyframes and pause the animation. Now that we paused the animation, we can pretend that we want to cancel it. But in this case we're using keyframes, if you do that, the element is just going to disappear. But if we toggle the transition and pause the transition, if the user wants to cancel the transition, they can do so and it's going to smoothly interrupt it and animate back to its original position. All right, so in this example, I'm going to show you that you can also animate the display type by using at starting style. So in this case, we have a couple of boxes. And this is our code. So right now, if you want to remove the second box, it would just abruptly disappear. But how do we animate this exit transition? Let's first start by defining some hidden styles. So this is just using the hidden attribute on the element. If it has the hidden attribute, you're going to set it to display none, opacity zero and a translate to 20 pixels on the y-axis. But this isn't enough to animate the display property. To do that, we have to add display of 0.5 seconds and use this keyword called allow discrete. Basically, what this keyword does is it waits for the transition to finish before it applies the display type. Otherwise, we would just apply the display property immediately and the box would disappear. All right, so let's see it in practice. Now if you select the middle box and we remove it, it's going to smoothly animate. And then using JavaScript, you can do some cleanup by removing the node. So you can just wait for on transition end and then remove it. Or you can listen for all of the animations on the element to be finished. But if you want smooth layout transitions, then you should use the view transition API. And it's not only great for animating page transitions, but we can also use it to animate any before and after state in the DOM. But let me actually show you an example. So again, here we have a couple of boxes. So let me show you how we can use view transitions to smoothly animate the layout. So first we're going to define a couple of view transition. The first one is going to be for the group. So we're going to create a view transition class named box, so we can target all of these elements at once. This is going to have an animation delay of 0.3 seconds. Then we're going to define a view transition new for elements that are entering the DOM. So we're going to define an enter animation of 0.5 seconds. And then we're going to define a view transition old for elements that are leaving the DOM, which is going to use the leave animation at 0.5 seconds. And then we're going to use forwards, so we apply those keyframes immediately. And then using JavaScript, we're going to assign the view transition names, so they're unique. But of course, if you want, you can also do this in CSS, but I think it's easier doing it this way. So first we're going to query all of the boxes and then we're going to loop over each box. And then for every second element, we're going to apply the leave view transition. Otherwise, we're going to give it a unique view transition name. And then we're going to apply the name. And we're also going to specify a view transition class, so we can reference the same element, so we don't have to repeat ourselves. And then we can start the view transition. So we're going to remove the second box. So here is how this looks like. Now if you remove the second box, the surrounding boxes are going to smoothly animate. Let's see that again. As you can see, it doesn't have the same jank as before where the elements just snapped into place. And this is the power of view transitions. But let's go back and let me show you where it makes more sense to use at starting styles, which are single elements such as the dialogue element or the popover API. All right, so this is a better example where we can use at starting style for elements that aren't going to shift the layout. So here we have a simple model and then we're just going to add some styles, which are going to be our closed state or exit transition. In this example, we're going to animate translate. So the model is going to exit using a translate of 100 viewport height. And then we have a special overlay property for a dialogue. And this just avoids any problems with the z-index for the overlay. And then we're going to use display again at 1 second and we're going to say allow discrete, so that the overlay and the display style don't toggle immediately. Now we can include the styles for the open state. So when the dialogue is open, we're going to use at starting style to define a translate at negative 100 viewport height, [music] which is going to animate to zero. And then we can include the backdrop styles. So here we have dialogue backdrop, so we're going to define a transparent background and for the transition we're going to have display, overlay and background color. And then in the open state, we can style the backdrop. So we're going to make it a bit darker. Unfortunately, we can't use nesting inside pseudo elements, so we have to be explicit like this. So we define at starting style and then we include the open backdrop styles inside. So here is how our model looks like. And now when we close the model, it's going to do the exit transition. And because we're using CSS transitions instead of keyframes, we can cancel the transition. So let's change this duration to 4 seconds. And now if we open the model and change our mind midway, you can see it's going to play the exit transition, which wouldn't be possible using CSS keyframes. All right, friends, that's it. If you want to support my work, you can become a Patreon member. Thank you for watching and I'll catch you in the next one. Peace.