เพิ่มลูกเล่นให้กับเว็บเรา ด้วย Svelte Transition

พอดีวันนี้ผมลองทำ Svelte Transition เล่นๆ ก็เลยเอามาแชร์เป็นบทความครับ โดยปกติเว็บทั่วๆไป ก็จะต้องมีการเพิ่มลูกเล่น มี animation มี transition เล็กๆน้อยๆ เพื่อให้เว็บมีชีวิตชีวา

ทีนี้ ปกติเนี่ยไอ้ตัว Transition เนี่ย เราสามารถเขียนเป็น CSS Transition หรือใช้ JavaScript ก็ได้ แต่วันนี้ บทความ จะเป็นการใช้ Svelte ซึ่ง ใน Svelte เนี่ย จะมี built-in transition มาให้เรา 7 แบบคือ fade , blur, fly , slide , scale , draw แล้วก็ crossfade ครับ

เตรียมโปรเจ็ค ด้วยการสร้างโปรเจ็คใหม่ :

npm create svelte@latest my-app

มาลองหัดเขียน Svelte กันดีกว่า

สวัสดีครับ เนื่องจากว่าผมเพิ่งลองหัดเขียน Svelte ก็เลยนำมาเขียนเป็นบทความสรุปเอาไว้ สำหรับคนที่กำลังเริ่มศึกษา เหมือนๆกันกับผม ซึ่งผมมีพื้นฐาน React.js กับ Vue มา ฉะนั้นบางส่วนอาจจะมีข้ามๆ หรือว่าไม่ได้พูดถึง (ขอติต่

DEVAHOYChai Phonbopit

svelte/transition

อย่างที่บอกไปก่อนหน้านี้ ตัว functions ที่มากับ Svelte มีด้วยกัน 7 แบบ แต่ละแบบ ก็จะมีบาง parameters ที่ต่างกัน แต่หลักๆ เนี่ย ก็จะมี parameters ที่เหมือนกันเลยคือ

• delay - (default = 0) เราสามารถตั้งให้ transition delay ได้
• duration (default = 400ms) คือระยะเวลาที่ให้มัน transition
• easing (default = linear) เป็น easing function สามารถดูเพิ่มเติม ว่าแต่ละแบบมีอะไรบ้าง ease visualiser

ตัวอย่างการทำ Fade

ตัว fade จะมี syntax แบบนี้

function fade(
  node: Element,
  { delay, duration, easing }?: FadeParams | undefined
): TransitionConfig;

วิธีการใช้งาน กำหนด transition:<name> ให้กับ element ได้เลยแบบนี้

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

การกำหนด parameters เช่น เปลี่ยนค่า delay และ duration

<p transition:fade={{ delay: 500, duration: 2000 }}>Fades in and out</p>

เราก็จะได้หน้าเว็บ ที่มีปุ่ม checkbox โดยมันจะทำการ fade เพื่อกด checkbox สามารถเข้าไปดูตัวอย่าง หรือลองอ่านเพิ่มเติมที่ Tutorial นี้ได้ครับ - https://learn.svelte.dev/tutorial/transition

The transition directive • Svelte Tutorial

Learn Svelte and SvelteKit with an interactive browser-based tutorial

Transition อื่นๆ ก็ทำลักษณะเดียวกันครับ (ต่างกันบาง parameters)

ตัวอย่าง Blur มี amount มา เพื่อกำหนด ว่าจะให้ blur แค่ไหน

<script>
  import { blur } from 'svelte/transition'
</script>

{#if condition}
  <div transition:blur={{ amount: 50 }}>blur</div>
{/if}

ตัวอย่าง fly กำหนดค่า x และ y เพื่อให้มัน transition to ตำแหน่งอะไร

<script>
  import { fly } from 'svelte/transition'
</script>

{#if condition}
  <div transition:fly={{ x: 100, y: 500 }}>
    fly
  </div>
{/if}

สุดท้าย ผมทำตัวอย่างเล็กๆน้อยๆ สำหรับการลองใช้ Transition แต่ละแบบ (โดยไม่มี crossfade และ draw นะครับ) ไว้ที่เว็บนี้ครับ

• ตัวอย่าง Demo - https://svelte-box.vercel.app/
• Source Code - https://github.com/Phonbopit/svelte-box/tree/main/src/components/transition

Reference

svelte/transition • Docs • Svelte

svelte/transition • Svelte documentation

The transition directive • Svelte Tutorial

Learn Svelte and SvelteKit with an interactive browser-based tutorial