Svelte 过渡指令

2023-02-22 11:11 更新

我们可以通过优雅地将元素转入和转出 DOM 来制作更具吸引力的用户界面。 Svelte 通过 ​transition​ 指令使这变得非常容易。

首先,从 ​svelte/transition​ 中导入 ​fade​ 函数...

<script>
	import { fade } from 'svelte/transition';
	let visible = true;
</script>

...然后将其添加到 ​<p>​ 元素:

<p transition:fade>Fades in and out</p>

示例代码

  • App.svelte

<script>
	import { fade } from 'svelte/transition';
	let visible = true;
</script>

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

{#if visible}
	<p transition:fade>
		Fades in and out
	</p>
{/if}


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号