Svelte - Transitions

Quiz

Svelte transitions make it simple to add animations to web applications by breaking down complex tasks into easy commands. This helps users see when things change in the applications more clearly.

What are Transitions in Svelte?

Transitions are smooth changes that occur when switching between different parts or states in a user interface. In svelte, these transitions are a useful tool that allows developers to add smooth animations when elements enter or leave DOM. This makes the user experience better by making interactions more visually appealing and easier to understand.

Transition Directive

The transition directive in Svelte allows users to apply animations and transitions to elements when they are added to or removed from the DOM. This helps create smooth visual effects that enhance user experience.

Syntax

To apply transition on HTML element you can use the transition: directive as shown below:

<p transition:fade>Content goes here</p>

Also first you need to import the desired transition function from svelte/transition. It includes common functions such as fade, fly, slide, scale, and draw.

<script>
import { fade, fly } from 'svelte/transition';
</script>

Adding Parameters

Svelte also enables us to add parameters in transitions such as delay, duration, and easing. These transition parameters allow us to customize how transitions behave.

Syntax

To use a transition with parameters, you write them in an object format using double curly braces.

<p transition:fly={{ y: 200, duration: 500 }}>Content goes here</p>

Transition In and out

Instead of using one transition directive for both entering and exiting animations, you can use separate "in:" and "out:" directives. This gives you more control over how an element looks when it appears and disappears.

Syntax

You can use in: and out: directive for transition as shown below:

<p in:fly={{ y: 200, duration: 2000 }} out:fade>
Content goes here
</p>

Custom CSS Transitions

Svelte also allows us to create custom CSS transitions to achieve unique effects. A custom transition is a function that takes two arguments: the DOM node for the transition and an object with properties like duration. The function returns an object that includes properties like delay, and duration, and a CSS function that sets the styles for the transition.

Example

Create a function that takes two inputs: the DOM node and an object with settings you want to customize, like duration. The function should return an object that controls the transition.

function customTransition(node, { duration = 400 }) {
    return {
        duration,
        css: (t) => `opacity: ${t}; transform: scale(${t});` // Example of changing opacity and scale
    };
}

Custom javascript Transitions

Svelte enables us to create custom javascript transitions for more complex animations that enhance user experience. You can again do it by creating a function that takes two parameters: DOM node and object for properties.

Transition Events

Transition events allow you to know when a transition starts and ends. This is useful for updating the user interface or starting other actions based on the transition's status.

Types of Transition Events

Svelte has the following types of transition events:

introstart: This happens when an element starts to come in.
outrostart: This happens when an element starts to leave.
introend: This happens when the entry transition is finished.
outroend: This happens when the exit transition is finished.

Syntax

You can use transition events in svelte as mentioned in the below syntax:

<div
    in:fade={{ duration: 300 }}
    out:fade={{ duration: 300 }}
    on:introstart={handleIntroStart}
    on:introend={handleIntroEnd}
    on:outrostart={handleOutroStart}
    on:outroend={handleOutroEnd}
  >
    <!-- Your content here -->
  </div>

Global transitions

In Svelte, a global transition is a feature that allows you to add transitions to whole groups of elements when they appear or disappear from the page, instead of just to single elements.

Syntax

To create a global transition, you add the |global modifier to the transition directive.

<div transition:slide|global>
    {item}
</div>

Key Blocks

Key blocks let you remove and recreate their contents whenever a specific value changes. This is helpful because it ensures that transitions happen every time the content updates, not just when the element comes in or goes out of the page.

Syntax

You define a key block using the {#key ...} syntax. You provide an expression that decides when the block should be checked again and its contents recreated.

{#key expression}
    <!-- Content goes here -->
{/key}

Example

This example shows how to fade in and out a message when a button is clicked using svelte transitions.

<script>
import { fade } from 'svelte/transition';
let showMessage = false;

function toggleMessage() {
    showMessage = !showMessage;
}
</script>

<button on:click={toggleMessage}>
{showMessage ? 'Hide' : 'Show'} Message
</button>

{#if showMessage}
<div transition:fade>
    This is a fading message!
</div>
{/if}

<style>
div {
    padding: 10px;
    background-color: green;
    border: 1px solid blue;
    margin-top: 10px;
}
</style>

Output

Print Page