Svelte • Template syntax

in: and out:

The in: and out: directives are identical to transition:, except that the resulting transitions are not bidirectional — an in transition will continue to ‘play’ alongside the out transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.

<script lang="ts">
  import { function fade(node: Element, { delay, duration, easing }?: FadeParams | undefined): TransitionConfigAnimates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.fade, function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfigAnimates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element's default values. out transitions animate from the element's default values to the provided values.fly } from 'svelte/transition';

  let let visible: booleanvisible = function $state<false>(initial: false): false (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$function $state<false>(initial: false): false (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial valuestate(false);
</script>

<label>
  <input type="checkbox" bind:checked={let visible: booleanvisible}>
  visible
</label>

{#if let visible: booleanvisible}
	<div in:function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfigAnimates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element's default values. out transitions animate from the element's default values to the provided values.fly={{ FlyParams.y?: string | number | undefinedy: 200 }} out:function fade(node: Element, { delay, duration, easing }?: FadeParams | undefined): TransitionConfigAnimates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.fade>flies in, fades out</div>
{/if}

<script>
  import { function fade(node: Element, { delay, duration, easing }?: FadeParams | undefined): TransitionConfigAnimates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.fade, function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfigAnimates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element's default values. out transitions animate from the element's default values to the provided values.fly } from 'svelte/transition';

  let let visible: booleanvisible = function $state<false>(initial: false): false (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial value$function $state<false>(initial: false): false (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
@see{@link https://svelte.dev/docs/svelte/$state Documentation}@paraminitial The initial valuestate(false);
</script>

<label>
  <input type="checkbox" bind:checked={let visible: booleanvisible}>
  visible
</label>

{#if let visible: booleanvisible}
	<div in:function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfigAnimates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element's default values. out transitions animate from the element's default values to the provided values.fly={{ FlyParams.y?: string | number | undefinedy: 200 }} out:function fade(node: Element, { delay, duration, easing }?: FadeParams | undefined): TransitionConfigAnimates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.fade>flies in, fades out</div>
{/if}