In the previous lesson, you learned how to use basic transitions in Svelte with the transition: directive. This allowed you to create smooth animations for elements appearing and disappearing, such as fading or sliding elements in and out. Now, we’ll take this a step further by exploring advanced transitions using the in:, out:, and animate: directives. These tools give you more control over how elements enter, leave, and change within your application, enabling you to create more dynamic and polished user interfaces.

In this lesson, you’ll learn how to:

• Use in: and out: to animate elements when they enter or leave the DOM.
• Apply the animate: directive to animate changes in lists or other elements.
• Combine these directives to create seamless and interactive animations.

By the end of this lesson, you’ll be able to create components like a toggleable list with smooth transitions and animations.

The in: and out: directives allow you to define specific animations for elements when they enter or leave the DOM. This is particularly useful for creating smooth transitions that enhance the user experience. Let’s break this down with an example.

In the example, we use in:fly and out:fade to animate a list of fruits. Here’s how it works:

svelte
Copy to clipboard
1<script>
2  import { fly, fade } from 'svelte/transition';
3  let visible = $state(true);
4</script>
5
6<button onclick={() => visible = !visible}>
7  {visible ? 'Hide' : 'Show'} Fruit List
8</button>
9
10{#if visible}
11  <div in:fly={{ y: 200, duration: 500 }} out:fade>
12    <ul>
13      {#each ["Apple", "Banana", "Cherry"] as item (item)}
14        <li>{item}</li>
15      {/each}
16    </ul>
17  </div>
18{/if}

In this example:

• The in:fly directive animates the list when it enters the DOM, making it "fly" in from 200 pixels below its final position over 500 milliseconds.
• The out:fade directive fades the list out when it leaves the DOM, creating a smooth exit animation.
• The visible state variable controls whether the list is shown or hidden, and the button toggles this state.

These directives give you precise control over how elements appear and disappear, making your application feel more dynamic and responsive.

The animate: directive is used to animate changes in lists or other elements, such as when items are added, removed, or reordered. This is particularly useful for creating smooth transitions in dynamic content. Let’s explore this with an example.

In the example, we use animate:flip to animate list items when they are reordered or updated:

svelte
Copy to clipboard
1<script>
2  import { flip } from 'svelte/animate';
3  let items = $state(["Apple", "Banana", "Cherry"]);
4</script>
5
6<ul>
7  {#each items as item (item)}
8    <li animate:flip>{item}</li>
9  {/each}
10</ul>

Here’s what’s happening:

• The animate:flip directive applies the FLIP (First, Last, Invert, Play) animation technique to each list item. This ensures smooth transitions when items are added, removed, or reordered.
• The (item) key ensures that Svelte can track each item individually, making the animations more efficient.

This directive is a powerful tool for creating polished and interactive lists in your applications.

Now that you understand in:, out:, and animate:, let’s combine them to create a more complex and interactive component. In the example, we combine these directives to create a toggleable list with smooth transitions and animations:

svelte
Copy to clipboard
1<script>
2  import { fly, fade } from 'svelte/transition';
3  import { flip } from 'svelte/animate';
4  
5  let visible = $state(true);
6  let items = $state(["Apple", "Banana", "Cherry"]);
7</script>
8
9<button onclick={() => visible = !visible}>
10  {visible ? 'Hide' : 'Show'} Fruit List
11</button>
12
13{#if visible}
14  <div in:fly={{ y: 200, duration: 500 }} out:fade>
15    <ul>
16      {#each items as item (item)}
17        <li animate:flip>{item}</li>
18      {/each}
19    </ul>
20  </div>
21{/if}

In this example:

• The in:fly and out:fade directives animate the list when it enters and leaves the DOM.
• The animate:flip directive animates the list items when they are reordered or updated.
• The visible state variable controls the visibility of the list, and the button toggles this state.

By combining these directives, you can create seamless and interactive animations that enhance the user experience.

In this lesson, you learned how to use advanced transitions in Svelte with the in:, out:, and animate: directives. These tools allow you to create dynamic and polished animations for elements entering, leaving, or changing within your application. Here’s a quick recap of what we covered:

• in: and out:: Used to animate elements when they enter or leave the DOM.
• animate:: Used to animate changes in lists or other elements.
• Combining directives: How to combine in:, out:, and animate: to create seamless and interactive animations.

In the practice exercises, you’ll apply these concepts to create dynamic and interactive components. Experiment with different transitions and animations to see how they can enhance your applications. Great work so far—keep practicing, and you’ll master these advanced techniques in no time!