เผยแพร่: 27 มี.ค. 2026
Chrome 147 เปิดตัวการเปลี่ยนฉากมุมมองที่กำหนดขอบเขตขององค์ประกอบ ซึ่งเป็นฟีเจอร์ที่ช่วยให้คุณเริ่มการเปลี่ยนฉากมุมมองใน Subtree ของ DOM ได้โดยการเรียกใช้ Element.startViewTransition()
ฟีเจอร์นี้ช่วยให้การเปลี่ยนมุมมองหลายรายการทำงานพร้อมกันได้ ซ้อนการเปลี่ยนมุมมองที่กำลังดำเนินการอยู่ และแก้ปัญหาการซ้อนทับกับposition: fixedเนื้อหาได้ ทั้งหมดนี้ในขณะที่ส่วนอื่นๆ ของหน้ายังคงโต้ตอบได้
การเปลี่ยนแปลงที่เกิดขึ้น
นับตั้งแต่ที่เราประกาศว่าฟีเจอร์นี้พร้อมสำหรับการทดสอบของนักพัฒนาซอฟต์แวร์ใน Chrome 140 เราได้ทำงานร่วมกับชุมชนและกลุ่มงาน CSS เพื่อสรุปรายละเอียด โดยเฉพาะอย่างยิ่งเกี่ยวกับลักษณะการทำงานเริ่มต้น
- โดยค่าเริ่มต้น รูทของขอบเขตจะเข้าร่วมด้วยตนเอง
- การเปลี่ยนมุมมองที่กำหนดขอบเขตจะมีองค์ประกอบเสมือนที่ซ้อนกันโดยอัตโนมัติโดยใช้กลุ่มการเปลี่ยนมุมมองที่ซ้อนกัน
::view-transition-group-children()Pseudo ในการเปลี่ยนฉากมุมมองที่กำหนดขอบเขตจะตัดเนื้อหาโดยอัตโนมัติหากรูทขอบเขตตัดส่วนที่ล้น- การเปลี่ยนฉากมุมมองระดับองค์ประกอบจะใช้
contain: layoutและview-transition-scope: allกับรูทขอบเขตโดยอัตโนมัติในระหว่างการเปลี่ยนฉาก
หลังจากการอัปเดตเหล่านี้ การเปลี่ยนฉากมุมมองที่กำหนดขอบเขตขององค์ประกอบจะพร้อมใช้งานใน Chrome เวอร์ชันเสถียรตั้งแต่เวอร์ชัน 147 เป็นต้นไป
การสาธิต
การสับเปลี่ยนรายการ
การสาธิตนี้ช่วยให้คุณสับเปลี่ยนรายการในแต่ละลิสต์ได้ นอกจากนี้ คุณยังสลับตำแหน่งของรายการได้โดยเลือกปุ่มตรงกลาง
การสาธิตการใช้งานแบบสด
การบันทึกการสาธิต
เนื่องจากใช้การเปลี่ยนฉากมุมมองที่กำหนดขอบเขตขององค์ประกอบ ทั้ง 2 รายการจึงสามารถเรียกใช้การเปลี่ยนฉากมุมมองแบบสับเปลี่ยนพร้อมกันได้ นอกจากนี้ คุณยังเริ่มการเปลี่ยนฉากมุมมองด้านนอกได้ด้วย ซึ่งจะสลับตำแหน่งของรายการในขณะที่ระบบยังจัดระเบียบรายการอยู่
ทริปปาตาโกเนียของฉัน
การสาธิต"ทริปปาตาโกเนียของฉัน" แสดงการเปลี่ยนฉากมุมมองที่กำหนดขอบเขตขององค์ประกอบ การสาธิตนี้สร้างขึ้นโดยอิงตามวิดีโอแคมเปญ "Web UX, re-imagined"
ใช้เมนูแบบเลื่อนลงเพื่อกรองรายการในตาราง ใช้ปุ่มเพิ่มในแต่ละรายการตารางกริดเพื่อเพิ่มลงในรายการสินค้าที่เลือก ซึ่งจะปรากฏในแถบด้านข้าง
การสาธิตการใช้งานแบบสด
หากต้องการดูการสาธิตแบบเต็ม ให้เปิด "ทริปปาตาโกเนียของฉัน" ในแท็บใหม่
การบันทึกการสาธิต
การสาธิตใช้การเปลี่ยนมุมมองที่กำหนดขอบเขตขององค์ประกอบใน 3 ที่ต่อไปนี้
- ตารางกริดของรายการเมื่อกรอง
- รายการของตารางกริดเมื่อเพิ่มลงในรายการสินค้าที่เลือก
- แถบด้านข้างที่แสดงรายการที่เลือก
อ่านคำแนะนำ
หากต้องการดูข้อมูลทั้งหมดเกี่ยวกับการเปลี่ยนฉากมุมมองที่กำหนดขอบเขตขององค์ประกอบ โปรดอ่านคำแนะนำ โดยจะแสดงวิธีใช้การเปลี่ยนฉากมุมมองที่กำหนดขอบเขตขององค์ประกอบ อธิบายรายละเอียดเพิ่มเติม และรวมการสาธิตเพิ่มเติม