Svelte模板语法

in: 和 out:

in: 和 out: 指令与 transition: 相同，只是产生的过渡不是双向的 — 如果在过渡进行过程中块被移出，in 过渡将继续与 out 过渡一起”播放”，而不是反向运行。如果 out 过渡被中止，过渡将从头开始。

<script>
  import { fade, fly } from 'svelte/transition';

  let visible = $state(false);
</script>

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

{#if visible}
	<div in:fly={{ y: 200 }} out:fade>飞入，淡出</div>
{/if}

在 GitHub 编辑此页面

transition: animate: