Advanced Transitions in Svelte: `in:`, `out:`, and `animate:`

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:

<script>
  import { fly, fade } from 'svelte/transition';
  let visible = $state(true);
</script>

<button onclick={() => visible = !visible}>
  {visible ? 'Hide' : 'Show'} Fruit List
</button>

{#if visible}
  <div in:fly={{ y: 200, duration: 500 }} out:fade>
    <ul>
      {#each ["Apple", "Banana", "Cherry"] as item (item)}
        <li>{item}</li>
      {/each}
    </ul>
  </div>
{/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:

<script>
  import { flip } from 'svelte/animate';
  let items = $state(["Apple", "Banana", "Cherry"]);
</script>

<ul>
  {#each items as item (item)}
    <li animate:flip>{item}</li>
  {/each}
</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.