เปลี่ยนได้อย่างราบรื่นด้วย View Transition API

Bramus

View Transition API ช่วยให้คุณสร้างการเปลี่ยนภาพอย่างราบรื่นระหว่างมุมมองต่างๆ ในเว็บไซต์ได้ วิธีนี้จะช่วยสร้างประสบการณ์ของผู้ใช้ที่ดึงดูดสายตามากขึ้นเมื่อผู้ใช้ไปยังส่วนต่างๆ ของเว็บไซต์ ไม่ว่าเว็บไซต์จะสร้างเป็นแอปพลิเคชันที่มีหลายหน้า (MPA) หรือแอปพลิเคชันหน้าเว็บเดียว (SPA) ก็ตาม

สถานการณ์ทั่วไปที่คุณควรใช้ทรานซิชันของมุมมอง ได้แก่

• ภาพขนาดย่อในหน้าข้อมูลผลิตภัณฑ์ที่แสดงที่เปลี่ยนเป็นรูปภาพผลิตภัณฑ์ขนาดเต็มในหน้ารายละเอียดผลิตภัณฑ์
• แถบนําทางแบบคงที่ที่จะแสดงอยู่เสมอเมื่อคุณไปยังหน้าต่างๆ
• ตารางที่มีรายการย้ายตำแหน่งขณะที่คุณกรอง

ใช้การเปลี่ยนมุมมอง

การเปลี่ยนมุมมองไม่ได้เชื่อมโยงกับสถาปัตยกรรมหรือเฟรมเวิร์กของแอปพลิเคชันที่เฉพาะเจาะจง และไม่ได้ทริกเกอร์แค่ในเอกสารเดียว และยังทริกเกอร์ระหว่างเอกสาร 2 ฉบับได้อีกด้วย

การเปลี่ยนมุมมองทั้ง 2 ประเภทใช้องค์ประกอบพื้นฐานและหลักการเดียวกัน

1. เบราว์เซอร์จะบันทึกภาพรวมของสถานะเก่าและใหม่
2. DOM จะอัปเดตขณะที่ระงับการแสดงผล
3. การเปลี่ยนภาพทำงานด้วยภาพเคลื่อนไหว CSS

สิ่งที่แตกต่างระหว่างทั้ง 2 ประเภทคือวิธีเรียกให้แสดง

การเปลี่ยนมุมมองในเอกสารเดียวกัน

เมื่อการเปลี่ยนมุมมองทำงานในเอกสารหนึ่ง การเปลี่ยนแปลงนั้นจะเรียกว่าการเปลี่ยนมุมมองเอกสารเดียวกัน ซึ่งมักเป็นกรณีในแอปพลิเคชันหน้าเว็บเดียว (SPA) Chrome จาก Chrome 111 รองรับการเปลี่ยนมุมมองเอกสารเดียวกัน

วิธีทริกเกอร์

ทริกเกอร์การเปลี่ยนมุมมองเอกสารเดียวกันโดยเรียกใช้ document.startViewTransition

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

ตัวอย่าง

ตัวอย่างการ์ดต่อไปนี้คือ SPA ที่ใช้การเปลี่ยนมุมมองเอกสารเดียวกันเพื่อสร้างภาพเคลื่อนไหวของการ์ดเมื่อมีการเพิ่มหรือนำการ์ดใหม่ออก

เริ่มสร้าง

โปรดไปที่หน้าเอกสารประกอบเฉพาะเพื่อดูข้อมูลทั้งหมดเกี่ยวกับการเปลี่ยนมุมมองเอกสารเดียวกัน

สร้างทรานซิชันมุมมองในเอกสารเดียวกัน

การเปลี่ยนมุมมองข้ามเอกสาร

เมื่อมีการเปลี่ยนมุมมองระหว่างเอกสาร 2 รายการ จะเรียกว่าการเปลี่ยนมุมมองข้ามเอกสาร ซึ่งเป็นเรื่องปกติสำหรับ MPA การเปลี่ยนมุมมองข้ามเอกสารใช้ได้ใน Chrome เวอร์ชัน 126 ขึ้นไป

วิธีทริกเกอร์

การเปลี่ยนมุมมองข้ามเอกสารจะทริกเกอร์โดยการไปยังส่วนต่างๆ แบบข้ามเอกสารที่มีต้นทางเดียวกัน หากเลือกใช้ทั้ง 2 หน้า กล่าวคือ ไม่มี API ที่จะเรียกให้เริ่มการเปลี่ยนมุมมองข้ามเอกสาร เมื่อผู้ใช้คลิกลิงก์ การคลิกจะทริกเกอร์การเปลี่ยนมุมมอง

หากต้องการเลือกใช้ ให้ใช้ข้อมูลโค้ด CSS ต่อไปนี้

@view-transition {
  navigation: auto;
}

ตัวอย่าง

ตัวอย่าง Stack Navigator ต่อไปนี้คือ MPA ที่ใช้การเปลี่ยนผ่านมุมมองข้ามเอกสารระหว่างเอกสาร 2 รายการ ระบบจะเพิ่มหน้าเว็บลงในกองหรือแสดงหน้าเว็บนั้นขึ้นมาใหม่โดยขึ้นอยู่กับว่าคุณกำลังไปยังส่วนลึกของการนําทางหรือไม่

เริ่มสร้าง

ดูข้อมูลทั้งหมดเกี่ยวกับการเปลี่ยนมุมมองข้ามเอกสาร

สร้างการเปลี่ยนมุมมองข้ามเอกสาร