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

Bramus

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

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

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

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

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

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

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

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

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

เมื่อทรานซิชันของมุมมองทำงานในเอกสารเดียว จะเรียกว่าทรานซิชันของมุมมองในเอกสารเดียวกัน ซึ่งมักเป็นกรณีในแอปพลิเคชันหน้าเว็บเดียว (SPA) 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 รายการ ระบบจะเพิ่มหน้าเว็บลงในกองหรือแสดงหน้าเว็บนั้นขึ้นมาใหม่โดยขึ้นอยู่กับว่าคุณกำลังไปยังส่วนลึกของการนําทางหรือไม่

เริ่มสร้าง

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

สร้างทรานซิชันมุมมองข้ามเอกสาร