SvelteTemplate syntax

in: and out:

in: ディレクティブと out: ディレクティブは transition: と同じですが、in: と out: の場合は双方向でない点が異なります — transition の進行中にブロックが消される場合、in transition は反転するのでなく、out transition と一緒に再生され続けます。out transition が中止されると、transition は最初からやり直されます。

<script>
  import { fade, fly } from 'svelte/transition';
  
  let visible = $state(false);
</script>

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

{#if visible}
	<div in:fly={{ y: 200 }} out:fade>flies in, fades out</div>
{/if}

Edit this page on GitHub

previous next

transition: animate: