Svelte Transitions

A transition is triggered by an element entering or leaving the DOM as a result of a state change. When a block is transitioning out, all elements inside the block, including those that do not have their own transitions, are kept in the DOM until every transition in the block has been completed. The transition: directive indicates a bidirectional transition, which means it can be smoothly reversed while the transition is in progress.