View Transition API ช่วยให้คุณสามารถสร้างการเปลี่ยนภาพที่ราบรื่นระหว่างมุมมองต่างๆ บนเว็บไซต์ของคุณ วิธีนี้จะสร้างประสบการณ์ของผู้ใช้ที่น่าดึงดูดมากขึ้นขณะไปยังส่วนต่างๆ ของเว็บไซต์ ไม่ว่าจะสร้างเป็นแอปพลิเคชันหลายหน้า (MPA) หรือแอปพลิเคชันหน้าเดียว (SPA) ก็ตาม
สถานการณ์ทั่วไปที่คุณจะใช้การเปลี่ยนมุมมอง ได้แก่
- ภาพขนาดย่อในหน้ารายการผลิตภัณฑ์ที่เปลี่ยนเป็นรูปภาพผลิตภัณฑ์ขนาดเต็มในหน้ารายละเอียดผลิตภัณฑ์
- แถบนำทางแบบคงที่ซึ่งจะอยู่ที่ตำแหน่งเดิมเมื่อคุณเปลี่ยนจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง
- ตารางกริดที่มีรายการเปลี่ยนตำแหน่งขณะที่คุณกรอง
ใช้การเปลี่ยนมุมมอง
การเปลี่ยนมุมมองไม่ได้เชื่อมโยงกับสถาปัตยกรรมแอปพลิเคชันหรือเฟรมเวิร์กเฉพาะ และไม่เพียงสามารถทริกเกอร์ได้ในเอกสารเดียวและระหว่างเอกสาร 2 ฉบับเท่านั้น
การเปลี่ยนมุมมองทั้ง 2 ประเภทอาศัยองค์ประกอบพื้นฐานและหลักการเดียวกัน ได้แก่
- เบราว์เซอร์จะบันทึกสแนปชอตของสถานะเก่าและใหม่
- DOM ได้รับการอัปเดตขณะระงับการแสดงผล
- การเปลี่ยนขับเคลื่อนโดยภาพเคลื่อนไหวของ 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 ฉบับ หน้าเว็บจะถูกพุชเข้าไปในกลุ่มหรือแยกออก ขึ้นอยู่กับว่าคุณเข้าสู่การนำทางลึกขึ้นหรือไม่
เริ่มสร้าง
ดูข้อมูลทั้งหมดที่ควรทราบเกี่ยวกับการเปลี่ยนมุมมองข้ามเอกสาร