Create a Fade Transition with Svelte
We will learn how to use the fade transition in svelte to create a simple transition. We will also look at the additional parameters you can pass to this transition to create a staggering effect.
Instructor: [0:00] Let's import the fade transition from the svelte/transition module. Now, we'll create a variable to hold the state that our transition will rely on. Inside our HTML, we will create the span element with a transition directive attached along with the fade transition we imported.
[0:18] This by itself won't have an effect on the HTML element until we wrap it into an if block. Let's wrap our span HTML element with an if block, which checks the state of our toggle variable we've created earlier.
[0:32] In order to change a state, we will attach a click event on the parent DIV. Inside of this event callback, we will change the toggle state. Now, when we click on the Egghead text, we will see it fade out, and if we click again, it will fade in.
[0:47] Let's take a look at another example where we will split the text letter by letter and transition in each letter with a bit of a delay. We have replaced our Egghead text with a placeholder variable from the each block.
[1:00] We can now add a delay to our fade transition directive as a value. You will notice that when we click, each letter is still fading as if it was still one word even with the delay property attached. This is because we need to offset the delay per letter in order for them to have different delays. We can do so by using the index variable created by the each block.