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

เริ่มสร้าง

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

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