iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
1

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 是不是好寫易上手,明天再繼續為大家介紹。


上一篇
DAY24- 過場動畫
下一篇
DAY26- 過場動畫 (三)
系列文
前端工程的另一個選擇 Svelte 30

尚未有邦友留言

立即登入留言