Svelteテンプレート構文

in: および out

in: および out: ディレクティブは transition: と同じですが、結果のトランジションは双方向ではないという点が異なります。ブロックがトランジション中にアウトロされた場合、in トランジションは out トランジションと一緒に「再生」され続けますが、反転されることはありません。アウトトランジションが中止されると、トランジションは最初から再スタートします。

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

GitHubでこのページを編集する

前へ次へ

transition animate