How to Create Transitions in Svelte
Ferenc Almasi • 2020 September 25 •
1 min read
You can easily create transitions in Svelte by using the :in and :out directives:
Copied to clipboard!
<!--
To apply animations to elements when enteringor leaving the DOM,
use the in: and out: directives
-->
<script>
import { fly, fade } from 'svelte/transition';
</script>
<div class="cube"
in:fly="{{ x: -100, duration: 300 }}"
out:fade="{{ duration: 300 }}">
</div>Within an object, you can define direction, duration, or delay. Svelte also exports 7 different predefined transitions for you to use:
fadeblurflyslidescale
Resources:
📚 More Webtips
Master the Art of Frontend
Access 100+ interactive lessons- Unlimited access to hundreds of tutorials
- Prepare for technical interviews
