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
Powered by Mintlify
Auto-generate your docs
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>