Adding parameters

Transition functions can accept parameters. Replace the fade transition with fly…

  1. <script>
  2.     import { fly } from 'svelte/transition';
  3.     let visible = true;
  4. </script>

…and apply it to the <p> along with some options:

  1. <p transition:fly="{{ y: 200, duration: 2000 }}">
  2.     Flies in and out
  3. </p>

Note that the transition is reversible — if you toggle the checkbox while the transition is ongoing, it transitions from the current point, rather than the beginning or the end.