How can I create animations in Svelte?

How can I create animations in Svelte?

You can create animations in Svelte using the built-in transition and animate directives. Would you like a code example?

Yes, please provide a simple example.

Sure! Here's a basic example:

<script>
  import { fade } from 'svelte/transition';
  let show = true;
</script>

<button on:click={() => show = !show}>Toggle</button>

{#if show}
  <div transition:fade>This will fade in and out!</div>
{/if}

What other animations can I use in Svelte?

In addition to fade, you can use fly, slide, and scale. Each has its own unique effect!

Can I customize the duration of the animations?

Yes, you can customize the duration by passing an options object to the transition directive, like this:

<div transition:fade={{ duration: 500 }}>This fades in and out over 500ms!</div>