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
Rocket Launch Your Career
Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:
