In the previous lesson, you learned how to use dynamic class binding and CSS transitions to create interactive components in Svelte. Now, we’ll take a step further and explore Svelte’s built-in transition system, which allows you to animate elements as they enter or leave the DOM. Transitions are a powerful way to enhance the user experience by making your application feel more dynamic and polished.

Svelte provides several built-in transition functions, such as fade and slide, which you can use to animate elements with minimal effort. These transitions are applied using the transition: directive, making it easy to add animations to your components. By the end of this lesson, you’ll understand how to use these transitions to create smooth and engaging animations in your Svelte applications.

To get started, let’s create a simple Svelte component that toggles the visibility of an element. We’ll use the $state rune in Svelte to manage the visibility state and an onclick event handler to toggle it. Here’s the basic setup:

svelte
Copy to clipboard
1<script>
2  let show = $state(true);
3</script>
4
5<button onclick={() => show = !show}>Toggle Visibility</button>
6
7{#if show}
8  <p>This text will appear and disappear!</p>
9{/if}

In this example:

• We define a state variable show using $state(true), which initializes to true.
• The onclick event handler toggles the value of show between true and false.
• The {#if} block conditionally renders the <p> element based on the value of show.

When you click the button, the text will appear or disappear instantly. In the next section, we’ll add transitions to make this change smoother.

Now, let’s enhance our component by adding transitions using the transition: directive. Svelte provides several built-in transition functions, such as fade and slide, which you can import from svelte/transition. Here’s how to apply these transitions to our example:

svelte
Copy to clipboard
1<script>
2  import { fade, slide } from 'svelte/transition';
3  let show = $state(true);
4</script>
5
6<button onclick={() => show = !show}>Toggle Visibility</button>
7
8{#if show}
9  <p transition:fade>This text fades in and out!</p>
10{/if}

In this updated example:

• We import the fade and slide transitions from svelte/transition.
• The transition:fade directive is applied to the <p> element, which will now fade in and out when it enters or leaves the DOM.

When you click the button, the text will smoothly fade in and out instead of appearing or disappearing instantly. You can also combine multiple transitions for more complex effects. For example, you can use transition:slide to make the text slide in and out:

svelte
Copy to clipboard
1{#if show}
2  <p transition:slide>This text slides in and out!</p>
3{/if}

Note: In Svelte, only one transition can be applied to an element at a time. If you try to use multiple transitions (e.g., transition:fade transition:slide), it will result in an error. To combine multiple effects, consider using a custom transition or pairing transitions with animations for more complex behaviors. Use transitions thoughtfully to maintain smooth and intuitive animations in your components.

Svelte’s built-in transitions can be customized by passing parameters such as duration and delay. These parameters allow you to fine-tune the timing and behavior of your animations. Here’s how to customize the fade transition:

svelte
Copy to clipboard
1{#if show}
2  <p transition:fade={{ duration: 1000, delay: 200 }}>
3    This text fades in and out slowly!
4  </p>
5{/if}

In this example:

• The fade transition is configured with a duration of 1000 milliseconds (1 second) and a delay of 200 milliseconds.
• The text will now take 1 second to fade in and out, with a slight delay before the animation starts.

You can apply similar customization to other transitions like slide:

svelte
Copy to clipboard
1{#if show}
2  <p transition:slide={{ duration: 500, delay: 100 }}>
3    This text slides in and out quickly!
4  </p>
5{/if}

In this lesson, you learned how to use Svelte’s built-in transitions to create smooth animations in your components. Here’s a quick recap of the key concepts:

• Transitions: Use the transition: directive to apply animations like fade and slide to elements as they enter or leave the DOM.
• Customization: Fine-tune transitions by passing parameters such as duration and delay.
• Combining Transitions: Experiment with combining multiple transitions for more complex effects.

In the practice exercises, you’ll apply these concepts to create components with smooth and engaging animations. Remember, Svelte 5 is pre-installed on CodeSignal, so you can focus on coding without worrying about setup. Experiment with the examples and explore how transitions can enhance your user interfaces. Great job completing this lesson—you’re one step closer to mastering styling and transitions in Svelte!