View Transitions API: การเปลี่ยนแปลงหน้าและสถานะในเบราว์เซอร์ราบรื่น
View Transitions API ทำหน้าที่อะไร วิธีการทำงานของการเปลี่ยนระหว่างเอกสารเดียวกันและข้ามเอกสาร วิธีจัดรูปแบบด้วย CSS และวิธีใช้งานอย่างมีความรับผิดชอบ
หลัก Takeaway
View Transitions API ช่วยให้เบราว์เซอร์เคลื่อนไหวระหว่างสองสถานะของเพจ เรียก document.startViewTransition() ด้วยฟังก์ชันที่อัปเดต DOM และเบราว์เซอร์จะบันทึกมุมมองเก่าและใหม่ และเคลื่อนไหวระหว่างมุมมองเหล่านั้น ซึ่งคุณสามารถจัดสไตล์ด้วย ::view-transition pseudo-elements มันทำงานได้ภายในแอปหน้าเดียวและในเบราว์เซอร์ที่รองรับการนำทางข้ามหน้า
มันทำงานอย่างไร
MDN อธิบาย document.startViewTransition() ว่าเป็นการเริ่มต้นการเปลี่ยนมุมมองเอกสารเดียวกัน ซึ่งเป็นเรื่องปกติในแอปหน้าเดียว เบราว์เซอร์จะจับภาพมุมมองปัจจุบัน รันการอัปเดตของคุณ จับภาพมุมมองใหม่ และสร้างภาพเคลื่อนไหวระหว่างมุมมองเหล่านั้น โดยค่าเริ่มต้นนั่นคือ cross-fade; CSS ให้คุณเปลี่ยนมันได้
เอกสารเดียวกันและข้ามเอกสาร
การเปลี่ยนผ่านเอกสารเดียวกันจะทำงานภายในหน้าเดียว เช่นเดียวกับใน SPA และ Chrome ได้สนับสนุนการเปลี่ยนผ่านตั้งแต่ Chrome 111 การเปลี่ยนข้ามเอกสารเคลื่อนไหวระหว่างหน้าที่แยกกันในไซต์ที่มีหลายหน้า ซึ่งบันทึกย่อของ MDN ในอดีตนั้นเป็นไปไม่ได้ พวกเขาใช้เหตุการณ์การสลับหน้าและการเปิดเผยหน้า และการเลือกเข้าร่วมใน CSS การรองรับเบราว์เซอร์ทั้งสองมีความแตกต่างกัน ดังนั้นโปรดตรวจสอบตารางความเข้ากันได้ในปัจจุบัน
จัดสไตล์การเปลี่ยนแปลง
การปรับแต่งส่วนใหญ่เป็น CSS ธรรมดา:
- ตั้งชื่อองค์ประกอบมุมมองการเปลี่ยนภาพเพื่อทำให้องค์ประกอบเคลื่อนไหวแยกจากส่วนที่เหลือของหน้า เช่น ภาพขนาดย่อที่ขยายเป็นภาพหลัก
- กำหนดเป้าหมาย ::view-transition-old() และ ::view-transition-new() เพื่อปรับแต่งภาพเคลื่อนไหว
- รักษาระยะเวลาให้สั้นและการเคลื่อนไหวมีความหมาย
- รวมภาพเคลื่อนไหวที่กำหนดเองไว้ในการตรวจสอบความชอบ-ลดการเคลื่อนไหว
การเพิ่มประสิทธิภาพแบบก้าวหน้า
ตรวจสอบการสนับสนุนก่อนเรียกใช้ API เสมอ และอัปเดต DOM โดยตรงหากขาดหายไป หน้าเว็บควรทำงานเหมือนกันโดยไม่มีภาพเคลื่อนไหว หลีกเลี่ยงการเปลี่ยนการนำทางเป็นเวลานาน ซึ่งจะทำให้ทั้งไซต์ช้าลง
ตัวอย่างการใช้งานการผลิต
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}คีย์ Principles ที่ต้องจำ
- startViewTransition() สแนปช็อตมุมมองเก่าและใหม่ และเคลื่อนไหวระหว่างมุมมองเหล่านั้น
- มีตัวเลือกเอกสารเดียวกัน (SPA) และข้ามเอกสาร (หลายหน้า) อยู่
- สไตล์ด้วย view-transition-name และ ::view-transition pseudo-elements
- ตรวจสอบการสนับสนุนและกลับไปใช้การอัปเดตทันที
- รักษาช่วงการเปลี่ยนภาพให้สั้นและเคารพการเคลื่อนไหวที่ลดลง
คำถามที่พบบ่อย
แหล่งที่มา
- View Transition API — MDN เว็บเอกสาร
- Smooth transitions with the View Transition API — Chrome for Developers