slide scale

昨天跟大家分享了fly fade兩種過場動畫的方式，今天接續分享 slide scale 這兩種。

本文同步放置於此

回顧怎麼使用

相信昨天分享的內容大家應該記憶猶新，不過還是幫大家溫習一下，通常使用過場動畫的時機點是在狀態變更的當下，所以在使用過場動畫一點要被包覆在if判斷式內。

再來就是要從svelte/transition 將需要的方法import進來，然後向使用html的屬性一般的寫到html標籤內。

slide scale 的介紹

溫習完了就來介紹今天的主角 slide scale 。其實簡單講就是字面上的意思， slide 就是折疊，而 scale 就是縮放，接下來就請大家看看下列程式碼。

<script>
	import { slide } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
	let isVisable = true;
</script>

<input type="checkbox" bind:checked={isVisable}/>
{#if isVisable}
	<div transition:slide="{{delay: 250, duration: 300, easing: quintOut }}">
		slides in and out
	</div>
{/if}

上面的例子就是 slide 跟之前的差不多，就如前面的說明需要if判斷式，還有需要import，最後是在html上面加上即可。而下面的則是scale的範例。

<script>
	import { scale } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
	let isVisable = true;
</script>

<input type="checkbox" bind:checked={isVisable}/>
{#if isVisable}
	<div transition:scale="{{duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut}}">
		scales in and out
	</div>
{/if}

小結

今天跟大家介紹的 slide scale 是不是好寫易上手，明天再繼續為大家介紹。