How To Use Svelte Flip Animation

This content originally appeared on CodeSource.io and was authored 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

The post How To Use Svelte Flip Animation appeared first on CodeSource.io.

This content originally appeared on CodeSource.io and was authored by Jatin Hemnani

Print Share Comment Cite Upload Translate Updates

APA

Jatin Hemnani | Sciencx (2021-03-02T06:59:22+00:00) How To Use Svelte Flip Animation. Retrieved from https://www.scien.cx/2021/03/02/how-to-use-svelte-flip-animation/

MLA

" » How To Use Svelte Flip Animation." Jatin Hemnani | Sciencx - Tuesday March 2, 2021, https://www.scien.cx/2021/03/02/how-to-use-svelte-flip-animation/

HARVARD

Jatin Hemnani | Sciencx Tuesday March 2, 2021 » How To Use Svelte Flip Animation., viewed ,<https://www.scien.cx/2021/03/02/how-to-use-svelte-flip-animation/>

VANCOUVER

Jatin Hemnani | Sciencx - » How To Use Svelte Flip Animation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/02/how-to-use-svelte-flip-animation/

CHICAGO

" » How To Use Svelte Flip Animation." Jatin Hemnani | Sciencx - Accessed . https://www.scien.cx/2021/03/02/how-to-use-svelte-flip-animation/

IEEE

" » How To Use Svelte Flip Animation." Jatin Hemnani | Sciencx [Online]. Available: https://www.scien.cx/2021/03/02/how-to-use-svelte-flip-animation/. [Accessed: ]

rf:citation

» How To Use Svelte Flip Animation | Jatin Hemnani | Sciencx | https://www.scien.cx/2021/03/02/how-to-use-svelte-flip-animation/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.