SvelteHow-ToBeginner · 3 min read

How to Use Slide Transition in Svelte: Simple Guide

In Svelte, you can use the built-in slide transition by importing it from 'svelte/transition' and applying it to elements with the transition:slide directive. This makes elements smoothly slide in and out when they enter or leave the DOM.

📐

Syntax

The slide transition is imported from 'svelte/transition' and used with the transition:slide directive on an element. You can optionally pass parameters like delay, duration, and easing to customize the animation.

import: Bring in slide from 'svelte/transition'.
directive: Use transition:slide on the element you want to animate.
parameters: Customize timing and easing by passing an object, e.g., { duration: 400 }.

svelte

import { slide } from 'svelte/transition';

<div transition:slide>Content here</div>

// With parameters
<div transition:slide={{ duration: 500, delay: 100 }}>Content here</div>

💻

Example

This example shows a button that toggles the visibility of a box. The box uses the slide transition to smoothly slide in and out when it appears or disappears.

svelte

<script>
  import { slide } from 'svelte/transition';
  let visible = false;
</script>

<button on:click={() => visible = !visible} aria-pressed={visible} aria-label="Toggle box">Toggle Box</button>

{#if visible}
  <div transition:slide class="box" tabindex="0">This box slides in and out!</div>
{/if}

<style>
  .box {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #90cdf4;
    border-radius: 0.5rem;
    color: #1a202c;
    max-width: 300px;
  }
  button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
  }
</style>

Output

A button labeled 'Toggle Box'. When clicked, a blue box with text 'This box slides in and out!' smoothly slides down into view or slides up out of view.

⚠️

Common Pitfalls

Common mistakes when using slide transition include:

Not importing slide from 'svelte/transition', causing errors.
Applying transition:slide to elements that are always in the DOM, so the transition never triggers.
Forgetting to wrap the element in an {#if} block or condition to trigger enter/leave transitions.
Not considering accessibility, such as keyboard focus on elements that appear/disappear.

Example of a wrong and right way:

svelte

<!-- Wrong: slide on always visible element -->
<script>
  import { slide } from 'svelte/transition';
</script>

<div transition:slide>This never slides because it is always visible.</div>

<!-- Right: slide on conditional element -->
<script>
  import { slide } from 'svelte/transition';
  let show = false;
</script>

<button on:click={() => show = !show}>Toggle</button>

{#if show}
  <div transition:slide>This slides in and out.</div>
{/if}

📊

Quick Reference

Summary tips for using slide transition in Svelte:

Always import slide from 'svelte/transition'.
Use transition:slide on elements that enter or leave the DOM.
Customize with parameters like duration, delay, and easing.
Wrap elements in {#if} blocks to trigger transitions.
Ensure accessibility by managing focus and ARIA attributes.

✅

Key Takeaways

Import slide from 'svelte/transition' and use transition:slide on elements that appear or disappear.

Wrap elements in {#if} blocks to trigger slide transitions on enter and leave.

Customize slide timing with parameters like duration and delay for smoother effects.

Avoid applying slide to always visible elements as transitions won't trigger.

Consider accessibility by managing focus and ARIA attributes on transitioning elements.