Transitions of the UI elements can make web pages look and feel better for the end users. They help provide an all around better user experience. In this post, we look at some basic Svelte Transitions and how to implement them.
If you are new to Svelte in general, I will recommend you to start with the basics of Svelte.
1 – The Svelte Fade Transitions
The first basic transition is fading an element in our out of the DOM. Svelte provides the transition directive to achieve this behaviour.
See the below example:
<script>
import { fade } from 'svelte/transition';
let showElement = true;
</script>
<label>
<input type="checkbox" bind:checked={showElement}>
showElement
</label>
{#if showElement}
<p transition:fade>
Fading Demo
</p>
{/if}
Here, we first import the fade
function from the svelte/transition
module. We can apply this function to the p
tag.
Also, we declare a variable showElement
to control the behaviour of the check box and trigger the transition using a Svelte if block.
2 – The Svelte Fly Transition
Another commonly used transition is the fly transition. In this, we can give the effect of an element flying into the DOM area.
Check out the below snippet.
<script>
import { fly } from 'svelte/transition';
let showElement = true;
</script>
<label>
<input type="checkbox" bind:checked={showElement}>
visible
</label>
{#if showElement}
<p transition:fly="{{ y: 3000, duration: 3000 }}">
Fly Demo
</p>
{/if}
Here, we import the fly
function from the svelte/transition
module.
Also, while adding the function to the DOM element, we provide additional parameters such as the y
co-ordinate and the duration
of the effect. These parameter values can be tweaked based on our exact requirement.
Also, do note that this transition effect is reversible. If we toggle the checkbox during the transition, it transitions from the current point rather than from the end or the beginning.
3 – Svelte In and Out Transitions
We can also have separate transitions for an element entering in the DOM and exiting the DOM.
See below example:
<script>
import { fade, fly } from 'svelte/transition';
let showElement = true;
</script>
<label>
<input type="checkbox" bind:checked={showElement}>
showElement
</label>
{#if showElement}
<p in:fly="{{ y: 300, duration: 3000 }}" out:fade>
In and Out Transition Demo
</p>
{/if}
In this case, we import both fade
and fly
functions.
Instead of using the transition
keyword, we use the in
and out
keywords. For the in
keyword, we use the fly
transition. For the out
keyword, we use fade
.
4 – Svelte Slide Transition
Lastly, we can also use the popular slide transition.
See below example:
<script>
import { slide } from 'svelte/transition';
let showElement = true;
</script>
<label>
<input type="checkbox" bind:checked={showElement}>
showElement
</label>
{#if showElement}
<p transition:slide>
Slide Demo
</p>
{/if}
In this case, we import the slide
function and use it on the element in the DOM.
Conclusion
Transitions in Svelte are a great way to make your application feel more responsive.
Want to learn additional tricks for Svelte user interface? Check out this post on how to implement tweening in Svelte.
If you have any comments or questions about this post, please feel free to mention them in the comments section below.
0 Comments