Svelte过渡事件

Svelte 过渡事件

了解过渡的开始和结束可能会很有用。Svelte调度监听事件,像监听其他任何DOM事件一样:<p

transition:fly="{{ y: 200, duration: 2000 }}"

on:introstart="{() => status = 'intro started'}"

on:outrostart="{() => status = 'outro started'}"

on:introend="{() => status = 'intro ended'}"

on:outroend="{() => status = 'outro ended'}"

>

Flies in and out

</p>示例代码App.svelte<script>

import { fly } from 'svelte/transition';

let visible = true;

let status = 'waiting...';

</script>

<p>status: {status}</p>

<label>

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

visible

</label>

{#if visible}

<p

transition:fly="{{ y: 200, duration: 2000 }}"

on:introstart="{() => status = 'intro started'}"

on:outrostart="{() => status = 'outro started'}"

on:introend="{() => status = 'intro ended'}"

on:outroend="{() => status = 'outro ended'}"

>

Flies in and out

</p>

{/if}