Svelte · Junior · Question 39 of 76

How do you animate an element appearing and disappearing?

<script>
  import { fade } from "svelte/transition";
  let visible = $state(true);
</script>

{#if visible}
  <p transition:fade>Hello</p>
{/if}

✓Correct answer: With the transition: directive and a function from svelte/transition
2Only with CSS @keyframes
3With <Transition> component

Explanation

in: and out: set separate intro and outro transitions. Built-ins include fade, fly, slide, scale, blur, draw.

Further reading

Test yourself

Take the Svelte · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.