Transcript from the "Transitions" Lesson
[00:00:00]
>> So when you're building a user interface, something that you'll need to do quite often is have elements appear and disappear in a more graceful way than if they just got rendered to the DOM and then got yanked out of the DOM. Because that can be jarring for users.
[00:00:15] And so right now in this application, we have a checkbox that is linked to whether or not this paragraph element gets rendered. If we toggle it, it appears and then it disappears. What we want to happen is for that element to fade in and fade out. And we can do that in Svelte with an element transition.
[00:00:33] First we need to import the transition from svelte/transition, and that looks like this. And then all we need to do is add the transition directive to our paragraph element. And now when we toggle the value of visible, we can see that the element gracefully fades in and fades out.
[00:00:59] It won't get removed from the DOM until the outro has completed. And we can parameterize these transitions as well. Let's turn our fade transition into a fly transition. And give it some options. We'll give it a y value and a duration. Now, when I toggle this checkbox, the element is gonna fly in and it's gonna fly out.
[00:01:36] Now you'll notice that as I'm interacting with this checkbox, the transition is reversible. If we change the value of visible while the element is introing or outroing, it won't restart it, it'll gracefully pick up from where it left off. And so in that way, we're able to build fairly robust but slick user interfaces.
[00:02:00] And that would be pretty difficult to do if you were writing it by hand. Because there's a lot of really complex state that you need to keep track of. We can also have different intro and outro transitions. So the transition is bidirectional, but we might wanna have something that flies in and then fades out.
[00:02:20] So I'll add fade back into our component. And then we'll turn this transition into an in, and then we'll add an out. And then we'll just pass it the fade function. Flies in, Fades out. And again, if you fade out while it's flying in, it'll combine those transitions so that you get a graceful effect.
[00:02:54] If you make it visible while it's fading out, then it will have to restart, because it doesn't have a way of composing those transitions in reverse. But that's a pretty rare situation. So there's a bunch of built in transitions. We have fade, fly, scale, slide, and they all do more or less what their name suggests.
[00:03:17] But we can also create our own custom transitions. So this is what the transition function looks like. This is how the fade transition is implemented. The first argument of the function is the mode that is gonna be transitioned. The second is the set of options that were passed in.
[00:03:35] And then the body of the function does whatever calculation that it needs to to get information about the current state of the node. Ie, what it's gonna look like in its non-transitioning state. And then it returns an object containing some information that Svelte will use to construct and apply the transition.
[00:03:54] So we're gonna return a delay value and a duration value, which basically are basically gonna be whatever gets passed in. And here is the most interesting part, the CSS property is a method that takes in a t value, which is a value between 0 and 1, and returns some CSS that is calculated from that t value.
[00:04:17] 0 means that the element is fully off screen, 1 means that the element is fully rendered. And so in between there, we can see how you can interpolate in such a way that you generate the illusion of a smooth transition. And so the fade transition is literally just the t value between 0 and 1 multiplied by the element's default opacity.
[00:04:41] So if you start with an element that has an opacity of 0.5, then halfway through the transition, the opacity of the element will be 0.25. You can also return other things, including a tick function, which will execute JavaScript on each frame. But most of the time, we'll be using CSS transitions because it's better for performance.
[00:05:06] Very often when you're doing motion in JavaScript applications, what you'll find is that animation libraries do a lot of the work inside a requestAnimationFrame handler. And that's good, it gives you a lot of flexibility and power. But it means that if any work happens that blocks the main thread, that requestAnimationFrame handler is also gonna get blocked.
[00:05:26] And what that means is that your animation is gonna be blocking. If you can do things using CSS instead, then the CSS animation will often happen completely off the main thread. And so it will be uninterrupted by any work that is happening elsewhere in the application. And so what it does is it simulates running the transition ahead of time.
[00:05:47] As soon as we begin the transition, Svelte will call that CSS method with all of the values between 0 and 1 immediately. So call it with t equals 0, t equals 0.1, t equals to 0.2, and everything all the way up to 1. It will collect the return values, and it will turn it into a CSS animation that looks a little bit like this.
[00:06:11] And that's how we can tell the element that it needs to fade in and out. It's a little bit boring though, we can get a lot more ambitious. So now we're gonna create a custom transition that we're gonna call spin. And we've got some boilerplate here already, and now we've just gotta implement it.
[00:06:29] And that spin transition is being applied to this element down here. I'm gonna add an easing function. Use the elasticOut. And again, that's gonna take the value between 0 and 1 and give us another value on the same scale. And we're gonna add a transform, which is gonna change the scale and the rotation of the element And we're also gonna change the color.
[00:07:53] I'm using HSL colors because it's really convenient to be able to interpolate between different hues without changing other things. It's a much better color space to work in if you're doing interpolation than RGB. So we need to turn it into an integer, this is what this double tilde means.
[00:08:16] I'm just gonna multiply t, which is from 0 to 1, multiply that by 360, because that's the color scale, it's a 360 degree color wheel. That's the hue value. The saturation is gonna be, The minimum of 100 and this value, don't need to know too much about, What that's doing, we'll just see the result in a second.
[00:08:58] Okay, and if I've done this correctly, then now when I make this visible, It's gonna spin in and change color in a gratuitous fashion. And again, this is all happening with CSS, even though we've got a lot of very custom logic. And we're using an easing function, the elasticOut easing function that you don't get when you're writing CSS animations.
[00:09:25] We're able to do all of this logic-driven animation in a way that runs as a CSS animation. And that's high performance and it's also kind to your phone's battery, more so than using a requestAnimationFrame handler.