Use Svelte 3 transitions to gracefully show and hide DOM elements

Instructor: [0:00] We have a form where users can type in their name, surname, and also decide whether they want to give me a million dollars. If they do, we are going to use this display info message variable to display a thank-you message like this. We would like to make this a bit more flashy. After all, we're talking about a million dollars.

[0:15] In order to do that, we're going to use Svelte transitions. First, import slide from Svelte transition. Next in this h1 header, we are going to transition slide. Now, if we click on the checkbox, we are going to see this thank-you message that is going to slide up and down.

[0:32] Slide also takes a couple of parameters which allows us to control the animation. We would like to ensure that the duration of this animation is exactly five seconds. In order to do that, pass in an object and specify duration of 5,000 milliseconds. Now, if I click on this checkbox, we're going to see it's going to slide down very slowly over the course of five seconds.

[0:51] We can also delay the animation. For instance, I would like to delay this animation by two seconds after I click on the checkbox. Right now, we have the desired effect. I'm going to click on that. Now it's going to slowly appear.

[1:03] Slide isn't the only type of a transition available in Svelte. For instance, we can import fade. It's going to behave in a very similar way. I can just pass in as a transition to this header. Now, if I click on that checkbox, it's going to fade in and fade out.

[1:18] Similar to slide, we can also control the delay and the duration of the animation, like this. Fade works by changing the opacity from zero to one. If, instead, we would like to achieve a blur effect, we need to import blur from svelte-transition, and I'm going to pass as a transition to this header. Right now, if I click on this, we're going to see the blur in and blur out of the view.