When are the transitions played?

The transitions in Svelte are played when elements are added or removed from the DOM.

in: transitions are executed when an element is added to the DOM. This usually occurs when a component is initialized or when a condition that controls the element’s rendering becomes true.

For example, in an {#if} block, when the if condition turns from falsy to truthy, the elements inside the {#if} block are added to the DOM. All the in: transitions applied to these elements will be played simultaneously as soon as the elements are inserted into the DOM:

{#if condition}
  <div in:fade>some content</div>
  <div transition:blur>more content</div>
{/if}

In the preceding code snippet, as condition turns to true, both <div> elements will be inserted into the DOM. As soon as both <div> elements are inserted, both the fade and blur transitions will start playing simultaneously. Whether both the fade...