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

เริ่มสร้าง

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

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