Transitions

You can use Svelte transitions just like you would any other component.

Let’s add a fade to our backdrop by adding transition:fade

<script>
  import { Modals, closeModal } from 'svelte-modals'
  import { fade } from 'svelte/transition'
</script>

<Modals>
  <div
    slot="backdrop"
    class="backdrop"
    transition:fade
    on:click={closeModal}
  />
</Modals>

and let’s do the same for the modal

<script>
  import { closeModal } from 'svelte-modals'
  import { fade } from 'svelte/transition'

  export let isOpen
  export let title
  export let message

</script>

{#if isOpen}
  <div role="dialog" class="modal" transition:fade|global>
    <div class="contents">
      <h2>{title}</h2>
      <p>{message}</p>
      <div class="actions">
        <button on:click={closeModal}>OK</button>
      </div>
    </div>
  </div>
{/if}

Try it out

Note: As of Svelte 4 the |global modifier is necessary for the transition to work on the modal. See Svelte docs for more information.

Transitions between Modals

If you are opening one modal after another, the intro and outro transitions of both modals will overlap. Depending on your animation, this might be ok, but often it’s cleaner to transition one at a time.

You can do this by forwarding the on:introstart and on:outroend events in your modal components.

<script>
  import { fade } from 'svelte/transition'

  export let isOpen
</script>

{#if isOpen}
  <div role="dialog" class="modal" transition:fade|global on:introstart on:outroend>
    <!-- ... -->
  </div>
{/if}

Let’s see how the transitions compare:

Overlapped Deferred