เรียนรู้ Transition เพิ่มลูกเล่นให้กับเว็บเรา ด้วย 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/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 แบบนี้

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

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

1
<script>
2
  import {fade} from 'svelte/transition';
3
  let visible = true;
4
</script>
5

6
<label>
7
  <input type="checkbox" bind:checked={visible} />
8
  visible
9
</label>
10

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

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

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

svelte.dev

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

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

1
<script>
2
  import {blur} from 'svelte/transition'
3
</script>
4

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

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

1
<script>
2
  import {fly} from 'svelte/transition'
3
</script>
4

5
{#if condition}
6
  <div transition:fly={{ x: 100, y: 500 }}>
7
    fly
8
  </div>
9
{/if}