พร้อมสำหรับการทดสอบของนักพัฒนาแอป: การเปลี่ยนมุมมองที่กำหนดขอบเขต

Bramus

เผยแพร่: 10 ก.ย. 2025

การเปลี่ยนมุมมองที่กำหนดขอบเขตคือส่วนขยายที่เสนอสำหรับ View Transition API ซึ่งช่วยให้คุณเริ่มการเปลี่ยนมุมมองในส่วนย่อยของ DOM ได้ ฟีเจอร์นี้พร้อมให้ทดสอบตั้งแต่ Chrome 140 โดยเปิดใช้ Flag "ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง" ใน chrome://flags เรากำลังพยายามขอความคิดเห็นจากนักพัฒนาแอป

บทนำสั้นๆ

หากต้องการเริ่มการเปลี่ยนฉากมุมมองที่กำหนดขอบเขต ให้เรียกใช้ element.startViewTransition() (แทน document.startViewTransition()) ใน HTMLElement ใดก็ได้ที่มีการใช้ contain: layout

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

ผลลัพธ์คือการเปลี่ยนมุมมองที่กำหนดขอบเขตไว้ที่ Subtree ของ HTMLElement ที่คุณเลือก โดยระบบจะแทรก ::view-transition Pseudo-Tree ที่ได้ลงใน HTMLElement นั้น HTMLElement ทำหน้าที่เป็นคอนเทนเนอร์สำหรับการเคลื่อนไหวในการเปลี่ยน

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

การเปลี่ยนฉากที่กำหนดขอบเขตช่วยให้การเปลี่ยนฉากของมุมมองหลายรายการทำงานพร้อมกันได้ (ตราบใดที่มีรูทการเปลี่ยนฉากที่แตกต่างกัน) ระบบจะป้องกันเหตุการณ์ของเคอร์เซอร์ในเฉพาะซับทรีนั้น (ซึ่งคุณสามารถเปิดใช้อีกครั้งได้) แทนที่จะป้องกันทั้งเอกสาร นอกจากนี้ ยังช่วยให้องค์ประกอบภายนอกรูทของการเปลี่ยนภาพวาดอยู่เหนือการเปลี่ยนภาพที่กำหนดขอบเขตได้

ดูข้อมูลทั้งหมดเกี่ยวกับการเปลี่ยนมุมมองที่กำหนดขอบเขตได้ในคำอธิบายเกี่ยวกับการเปลี่ยนมุมมองที่กำหนดขอบเขตได้

สาธิต

ในเดโมต่อไปนี้ คุณสามารถย้ายจุดภายในคอนเทนเนอร์ได้โดยคลิกปุ่มใดปุ่มหนึ่ง คุณทำได้โดยใช้การเปลี่ยนมุมมองที่กำหนดขอบเขตเอกสารหรือการเปลี่ยนมุมมองที่กำหนดขอบเขตองค์ประกอบ ซึ่งจะช่วยให้คุณเห็นลักษณะการทำงานที่แตกต่างกัน

การสาธิตการใช้งานแบบสด

การบันทึกการสาธิต

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

เราต้องการความคิดเห็นจากคุณ

เราสนใจความคิดเห็นจากชุมชนนักพัฒนาเว็บเกี่ยวกับเรื่องต่อไปนี้

โปรดแชร์ความคิดเห็นโดยแสดงความคิดเห็นในปัญหา #9890 ของ CSS WG โปรดทำความคุ้นเคยกับปัญหาที่ทราบและข้อจำกัดก่อนแสดงความคิดเห็น

หากพบข้อบกพร่อง โปรดรายงานข้อบกพร่องของ Chromium เพื่อแจ้งให้เราทราบ