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...