Dev to webs {Coding…}

บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

บทที่ 22: การใช้ Transition กับ x-show

1. ความเข้าใจเกี่ยวกับ Transition ใน Alpine.js

Alpine.js มีคำสั่ง x-transition เพื่อเพิ่มเอฟเฟกต์ Transition ในการแสดง (x-show="true") หรือซ่อน (x-show="false") องค์ประกอบบนหน้าเว็บ ช่วยให้การเปลี่ยนแปลงดูนุ่มนวลและสวยงามยิ่งขึ้น

2. การใช้ Transition เบื้องต้นกับ x-show

ตัวอย่างพื้นฐาน:
1
2
3
4
5
6
<div x-data="{ isVisible: false }">
    <button @click="isVisible = !isVisible">Toggle</button>
    <div x-show="isVisible" x-transition style="background: lightblue; padding: 10px;">
        <p>This content appears with a transition!</p>
    </div>
</div>

คำอธิบาย:

  • x-show="isVisible" ควบคุมการแสดงหรือซ่อน <div>
  • x-transition เพิ่มเอฟเฟกต์ Transition อัตโนมัติเมื่อแสดงหรือซ่อนองค์ประกอบ

3. การปรับแต่ง Transition ด้วยคลาส

คุณสามารถปรับแต่ง Transition โดยกำหนดคลาส CSS เพื่อควบคุมลักษณะการแสดงผล

ตัวอย่าง:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style>
    .enter {
        opacity: 0;
        transform: scale(0.9);
    }
    .enter-active {
        transition: all 0.3s ease-out;
    }
    .enter-to {
        opacity: 1;
        transform: scale(1);
    }
    .leave {
        opacity: 1;
        transform: scale(1);
    }
    .leave-active {
        transition: all 0.3s ease-out;
    }
    .leave-to {
        opacity: 0;
        transform: scale(0.9);
    }
</style>
 
<div x-data="{ isVisible: false }">
    <button @click="isVisible = !isVisible">Toggle</button>
    <div x-show="isVisible"
         x-transition:enter="enter"
         x-transition:enter-start="enter"
         x-transition:enter-end="enter-to"
         x-transition:leave="leave"
         x-transition:leave-start="leave"
         x-transition:leave-end="leave-to"
         style="background: lightblue; padding: 10px;">
        <p>This content has a custom transition!</p>
    </div>
</div>

คำอธิบาย:

  • x-transition:enter: กำหนด Transition เมื่อองค์ประกอบเริ่มแสดง
  • x-transition:leave: กำหนด Transition เมื่อองค์ประกอบเริ่มซ่อน
  • คลาส enter-active, enter-to, leave-active, และ leave-to ใช้ควบคุมลักษณะ Transition ในแต่ละขั้นตอน

4. การใช้ Transition แบบกำหนดระยะเวลา

สามารถปรับระยะเวลาในการแสดงหรือซ่อนองค์ประกอบได้ด้วย x-transition.duration

ตัวอย่าง:
1
2
3
4
5
6
<div x-data="{ isVisible: false }">
    <button @click="isVisible = !isVisible">Toggle</button>
    <div x-show="isVisible" x-transition.duration.500ms style="background: lightgreen; padding: 10px;">
        <p>This content fades in and out over 500ms!</p>
    </div>
</div>

คำอธิบาย:

  • x-transition.duration.500ms ตั้งระยะเวลา Transition เป็น 500 มิลลิวินาที

5. การใช้ Transition กับความล่าช้า (Delay)

สามารถเพิ่มความล่าช้าก่อนเริ่ม Transition ด้วย x-transition.delay

ตัวอย่าง:
1
2
3
4
5
6
<div x-data="{ isVisible: false }">
    <button @click="isVisible = !isVisible">Toggle</button>
    <div x-show="isVisible" x-transition.delay.300ms style="background: lightcoral; padding: 10px;">
        <p>This content appears with a 300ms delay!</p>
    </div>
</div>

คำอธิบาย:

  • x-transition.delay.300ms เพิ่มความล่าช้าก่อนเริ่ม Transition 300 มิลลิวินาที

6. การใช้ Transition กับสถานะซ้อนกัน

สามารถใช้ Transition กับหลายองค์ประกอบพร้อมกัน เช่น การเปิด/ปิด Modal และพื้นหลัง Overlay

ตัวอย่าง:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
    .fade {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    .fade-in {
        opacity: 1;
    }
</style>
 
<div x-data="{ isModalOpen: false }">
    <button @click="isModalOpen = true">Open Modal</button>
     
    <!-- Overlay -->
    <div x-show="isModalOpen"
         x-transition:enter="fade"
         x-transition:enter-end="fade-in"
         x-transition:leave="fade-in"
         x-transition:leave-end="fade"
         style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);">
    </div>
 
    <!-- Modal -->
    <div x-show="isModalOpen"
         x-transition
         style="background: white; padding: 20px; max-width: 400px; margin: 50px auto; position: relative;">
        <h2>Modal Title</h2>
        <p>This is the modal content.</p>
        <button @click="isModalOpen = false">Close</button>
    </div>
</div>

คำอธิบาย:

  • ใช้ Transition ซ้อนกันระหว่าง Overlay และ Modal เพื่อให้ทั้งสององค์ประกอบมีเอฟเฟกต์การแสดง/ซ่อนที่สมูท
  • คลาส fade และ fade-in ใช้ปรับลักษณะของ Overlay

7. ข้อควรระวังในการใช้ Transition

  1. ประสิทธิภาพ:
    • อย่าใช้ Transition กับองค์ประกอบจำนวนมากพร้อมกัน อาจทำให้การแสดงผลช้าลง
  2. การกำหนดคลาส CSS:
    • ต้องตรวจสอบให้แน่ใจว่าคลาส CSS สำหรับ Transition ถูกตั้งค่าอย่างเหมาะสม
  3. การกำหนดเวลา (Duration):
    • ควรเลือกระยะเวลาที่เหมาะสม ไม่เร็วหรือช้าเกินไป

สรุป

ในบทนี้ คุณได้เรียนรู้วิธีเพิ่ม Transition ให้กับ x-show ด้วย x-transition ทั้งในรูปแบบพื้นฐานและการปรับแต่งแบบกำหนดเอง ตัวอย่างการใช้งานแสดงถึงความยืดหยุ่นในการสร้างประสบการณ์การแสดงผลที่นุ่มนวลและน่าสนใจ ในบทถัดไป เราจะเรียนรู้เกี่ยวกับการจัดการ State แบบ Reactive ด้วย x-effect!