in transitions and from the current opacity to 0 for out transitions.
Usage
Parameters
Milliseconds before starting the transition
Duration of the transition in milliseconds
An easing function that controls the animation curve
Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
API reference for the fade transition in Svelte
in transitions and from the current opacity to 0 for out transitions.
<script>
import { fade } from 'svelte/transition';
</script>
<div transition:fade>fades in and out</div>
<div in:fade>fades in</div>
<div out:fade>fades out</div>
<script>
import { fade } from 'svelte/transition';
import { cubicOut } from 'svelte/easing';
</script>
<div transition:fade={{ duration: 1000, easing: cubicOut }}>
fades slowly
</div>