svelte

How To Use Svelte Flip Animation


In this article, you will learn How To Use Svelte Flip Animation.

Importing the Flip Animation

import {flip} from 'svelte/animate'

Here, you have imported the Flip animation from Svelte.

Using The Animation

To use the Flip animation you have to add an animate property to the HTML element inside the {#each} block.

{#each todos as todo (todo.id)}
<div animate:flip={{duration:500}}>
<div>{todo.todo}</div>
<button on:click={()=>deleteTodo(todo.id)}>Delete</button>
</div>
{/each}

Now, after running this code each time a new item is added or removed, it will have a Flip animation.

NOTE: You can use the Flip animation only inside {#each} block.

Result


Share on social media

//