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

Bramus

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

สถานการณ์ทั่วไปที่คุณต้องใช้การเปลี่ยนมุมมองมีดังนี้

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

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

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

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

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

สิ่งหนึ่งที่ต่างกันระหว่างแต่ละประเภทคือวิธีที่คุณทริกเกอร์

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

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

เริ่มสร้าง

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

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