Transitions 過場動畫

Transitions 是今天要分享的主題，相信不管在哪裡都很常看到他，因為有他畫面呈現才不會那麼硬梆梆的，當然 svelte 有內建自己的過場動畫，今天就來介紹一下。

本文同步放置於此

Transitions 甚麼是過場動畫

相信大家都很熟悉 Power Point ，也知道如果單純的換頁會讓看投影片的人覺得單調乏味，甚至於無法吸收到講者想要分享的內容，所以在 Power Point 在換頁時會有些動畫呈現方式，讓聽眾不會感覺到投影片太死板。當然網頁也是一樣的，如果太單調會讓瀏覽的觀眾覺得太枯燥乏味，所以 svelte 才會有內建今天要跟大家分享的 Transitions 過場動畫。

Transitions 的種類

這部分大家可以參考官網的Transitions API 文件，這部分先跟大家分享一下它的種類有以下六種。

• fade
• fly
• slide
• scale
• draw
• crossfade

Transitions 的使用方法

在介紹完 Transitions 的種類後大家比較有興趣的是這過場動畫怎麼用，今天先跟大家分享一些簡單的過場動畫的使用方式，今天會跟大家分享的是fade淡入淡出跟fly飛入飛出。所以先請大家看一下下列的程式碼。

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

上面的例子是跟大家分享如何讓html的元件淡入淡出的呈現，簡單說明一下就是先從 svelte/transition import fade 進來，接下來在html上加上transition:fade即可，但是一定要在這之前加入顯示的條件，如此在顯示時會淡入，不顯示時會淡出。接下來大家再看看下列的程式碼。

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

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

{#if visible}
	<p transition:fly="{{ y: 200, duration: 2000 }}">
		Fades in and out
	</p>
{/if}

接承fade的例子我們在改寫成fly的例子，簡單說明一下就是當元件消失的時候會跑到指定的位置淡出，這部分跟大家分享的是過場動畫後可以接著要如何呈現的變數，以上面的例子就是耗時2000毫秒移動到y=200的位置後淡出。

小結

今天先跟大家初步的介紹 Transitions 過場動畫，並且分享了兩個過場動畫的種類fade跟fly，還有用實際的例子告訴大家他是甚麼以及該如何使用，希望大家會喜歡。