[Svelte 3] Use Svelte 3 transitions to gracefully show and hide DOM elements

Most websites are quite static and adding some animations/transitions can improve the user experience by a lot.

In this lesson we're going to learn how to use Svelte 3 transitions such as slide, fade and blur in order to show/hide a 'thank you' message in a form

 

<script>
  import { fly, slide, blur } from "svelte/transition";
  let displayInfoMessage = false;
</script>

<form>
  <div class="name-field">
    <label for="name">Name:</label>
    <input type="text" name="name" />
  </div>
  <div class="surname-field">
    <label for="surname">Surname:</label>
    <input type="text" name="surname" />
  </div>
  <label>
    <input type="checkbox" bind:checked={displayInfoMessage} />
    Do you want to give me a million dollars?
  </label>
</form>

{#if displayInfoMessage}
  <h1 transition:blur={{ duration: 1000 }}>Thank you!</h1>
{/if}