Adding Image Transitions In Svelte

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