This content originally appeared on CodeSource.io and was authored by Jatin Hemnani
In this tutorial, we will learn How To Add Image Transitions In Svelte.
Importing Transitions
import {fly} from 'svelte/transition'
let visible = true;Above we have imported transitions from Svelte and a variable to control the transition in our component.
Toggle Transition
<button on:click={()=>visible=!visible}>
Toggle
</button>Above we have created a <button>, with which we will toggle the transition by changing the value of visible to the opposite of the current value(true or false).
Adding Transition
<div>
{#if visible}
<img transition:fly={{x:200,duration:1000}} src="https://bit.ly/3qytwhh" height=200 width=300 alt='title' />
{/if}
</div>Here we have an <img> inside #if block so we can identify when to show the image using the visible variable which we declared above. We have added transition property to <img>. The transition we are using is fly which also has properties with an axis and duration.
Result Of Above Code
The post Adding Image Transitions In Svelte appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Jatin Hemnani
Jatin Hemnani | Sciencx (2021-02-18T11:29:59+00:00) Adding Image Transitions In Svelte. Retrieved from https://www.scien.cx/2021/02/18/adding-image-transitions-in-svelte/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.