How To Use Svelte Flip Animation
Posted on: March 02, 2021 by Jatin Hemnani
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
//