View Transition API ช่วยให้คุณอัปเดต DOM ได้ภายในขั้นตอนเดียว พร้อมกับสร้างการเปลี่ยนภาพเคลื่อนไหวระหว่าง 2 สถานะ
ทรานซิชันประเภทนี้เป็นฟีเจอร์ที่นักพัฒนาแอปรวมถึงเราขอมาบ่อยมาก และเราคิดว่าเราทำให้ฟีเจอร์นี้ใช้งานได้อย่างสมดุล ทั้งในแง่ค่าเริ่มต้นที่ดี ความสามารถในการขยาย และการปรับแต่ง ฟังดูเหมือนว่าเรากำลังคุยโว แต่ความคิดเห็นจากนักพัฒนาแอปเป็นกุญแจสำคัญในการออกแบบฟีเจอร์นี้ ต้นแบบก่อนหน้านี้ของฟีเจอร์นี้มีความยืดหยุ่นน้อยกว่ามาก และผู้ที่สละเวลาลองใช้ต้นแบบและแสดงความคิดเห็น (เช่น คุณ) ทำให้เราต้องคิดใหม่ทั้งหมด ขอขอบคุณ
หากต้องการทำความรู้จักกับฟีเจอร์นี้และลองใช้เดโม โปรดดูคู่มือ หากมีสิ่งใดที่รู้สึกว่าไม่ครอบคลุมในบทแนะนำ โปรดติดต่อฉันทาง Twitter, Mastodon หรือทางอีเมล
ปัจจุบัน View Transition API มีให้บริการใน Chrome เท่านั้น แต่โชคดีที่สามารถใช้เป็นการเพิ่มประสิทธิภาพแบบเป็นขั้นเป็นตอนได้ คู่มือนี้มีฟังก์ชันตัวช่วยที่คุณใช้ในเบราว์เซอร์ต่างๆ ได้ แต่เฉพาะเบราว์เซอร์ที่รองรับการเปลี่ยนมุมมองเท่านั้นที่จะแสดงภาพเคลื่อนไหว
เราพัฒนาฟีเจอร์นี้ภายในกลุ่มทำงาน CSS โดยได้รับข้อมูลจากผู้ให้บริการเบราว์เซอร์รายอื่นๆ และบุคคลอิสระ เราไม่ทราบว่าจะเบราว์เซอร์อื่นๆ นำการเปลี่ยนผ่านมุมมองมาใช้หรือไม่และเมื่อใด แต่โปรดติดตามจุดยืนด้านมาตรฐานของ Mozilla และจุดยืนด้านมาตรฐานของ WebKit
แต่เรายังไม่ "เสร็จสิ้น"
ฟังก์ชันการทำงานที่เปิดตัวใน Chrome 111 เป็นเพียงรุ่นแรกเท่านั้น เราหวังว่าจะพบข้อบกพร่องทั้งหมดแล้ว แต่โปรดรายงานปัญหาที่คุณพบที่ crbug.com โดยควรแนบไฟล์เดโมที่ตัดให้สั้นลง หากไม่สะดวกที่จะใช้วิธีนี้ โปรดติดต่อเราทาง Twitter, Mastodon หรือทางอีเมล แล้วเราจะให้ความช่วยเหลือ
การเปิดตัวครั้งนี้เป็นเพียงส่วนเล็กๆ ของภาพรวมที่หวังว่าจะมีประโยชน์ เราได้ร่างการขยายฟีเจอร์นี้บางส่วนแล้วเพื่อให้ชิ้นส่วนที่เราจัดส่งในวันนี้ใช้งานร่วมกันได้ในอนาคต
ต่อไปนี้เป็นตัวอย่างคร่าวๆ ของสิ่งที่เรากำลังพิจารณา ฟีเจอร์เหล่านี้ไม่ได้จัดเรียงตามลําดับความสําคัญ (แต่ฟีเจอร์แรกอาจสำคัญที่สุดสําหรับผู้ใช้จํานวนมาก) เราจึงอยากทราบความคิดเห็นของคุณว่าฟีเจอร์ใดที่เพิ่มเข้ามาใหม่สำคัญกับคุณมากที่สุด
การเปลี่ยนผ่านระหว่างเอกสาร
ฟีเจอร์นี้เป็นสิ่งที่เราคิดว่านักพัฒนาแอปส่วนใหญ่ต้องการให้เราพัฒนาเป็นอันดับถัดไป และข่าวดีก็คือเรากำลังพัฒนาฟีเจอร์นี้อยู่
View Transitions API ได้รับการออกแบบมาเพื่อให้ทำงานกับเอกสารที่มีแหล่งที่มาเดียวกันได้ ความแตกต่างเพียงอย่างเดียวคือ แทนที่ startViewTransition จะส่งสัญญาณการเปลี่ยนแปลงสถานะ DOM การนำทางจะส่งสัญญาณการเปลี่ยนแปลงนั้น
โปรดดูตัวอย่างของฟีเจอร์นี้ในเบื้องหลังของ Flag chrome://flags/#view-transition-on-navigation ต่อไปนี้เป็นการสาธิตแบบง่ายมากและการสาธิตที่ซับซ้อนมากขึ้น
หากต้องการดําเนินการต่อ เราต้องดูว่าแต่ละหน้าเลือกใช้การเปลี่ยนผ่านอย่างไร ตอนนี้เราใช้เมตาแท็ก <meta name="view-transition" content="same-origin"> แต่เราคิดว่า CSS เหมาะกว่า นอกจากนี้ เรายังต้องการให้คุณทราบได้ง่ายขึ้นว่าคุณกำลังเปลี่ยนจากหน้าเว็บประเภทใด โดยไม่จำเป็นต้องเขียน JavaScript
ยังมีงานอีกมากที่ต้องทำ และเราต้องการทำให้ "ถูกต้อง" มากกว่า "รวดเร็ว" แต่เรื่องนี้ก็สำคัญกับเราอย่างแน่นอน
ภาพเคลื่อนไหวที่ขับเคลื่อนโดยคอมโพสิตอร์
เราเลือกที่จะแสดงผลความกว้างและความสูงแบบเคลื่อนไหวในกลุ่มทรานซิชันโดยค่าเริ่มต้นเนื่องจากปรับแต่งได้ง่ายกว่ามาก อย่างไรก็ตาม วิธีนี้หมายความว่าภาพเคลื่อนไหวจะทำงานบนเธรดหลัก ซึ่งไม่เหมาะอย่างยิ่ง โดยเฉพาะระหว่างการโหลดหน้าเว็บ
เราวางแผนที่จะตรวจหาภาพเคลื่อนไหวเริ่มต้นและการปรับเปลี่ยนทั่วไป จากนั้นจะตีความใหม่ให้เป็นภาพเคลื่อนไหวที่ขับเคลื่อนโดยคอมโพสิตเพื่อเพิ่มประสิทธิภาพให้ดียิ่งขึ้น
การเปลี่ยนที่กำหนดขอบเขต
ขณะนี้ การเปลี่ยนรูปแบบ SPA จะกำหนดขอบเขตสำหรับทั้งเอกสาร และจะมีการเปลี่ยนรูปแบบได้เพียงครั้งละ 1 รายการเท่านั้น เราต้องการเปิดตัวฟีเจอร์ที่ช่วยให้ทรานซิชันมีผลกับองค์ประกอบหนึ่งๆ ได้ เพื่อให้คอมโพเนนต์หน้าเว็บหลายรายการทําทรานซิชันแยกกันได้
ซึ่งจะช่วยให้โปรแกรมเล่นวิดีโอแบบฝังใช้การเปลี่ยนมุมมองได้ในเวลาเดียวกันกับวิดเจ็ตแชทแบบฝัง
กลุ่มทรานซิชันที่ซ้อนกัน
ขณะนี้ ::view-transition-group ทั้งหมดเป็นพี่น้องกัน ซึ่งมักจะเป็นสิ่งที่ดี เนื่องจากช่วยให้มุมมองเปลี่ยนจากคอนเทนเนอร์หนึ่งไปยังอีกคอนเทนเนอร์หนึ่งได้ และคุณไม่ต้องกังวลเกี่ยวกับการตัด
อย่างไรก็ตาม ในบางครั้ง คุณอาจต้องการให้มุมมองถูกตัดโดยพร็อพเพอร์ตี้ระดับบนสุดบางรายการ ซึ่งอาจเกี่ยวข้องกับการเปลี่ยนผ่านด้วย
เราต้องการตรวจสอบการเลือกใช้ที่วาง ::view-transition-group หนึ่งๆ ภายใน ::view-transition-group อื่น
คลาสของทรานซิชัน
view-transition-name แต่ละรายการต้องไม่ซ้ำกัน วิธีนี้ช่วยให้เราระบุว่าองค์ประกอบหนึ่งๆ "เหมือนกัน" ในแง่แนวคิดทั้ง 2 ด้านของการเปลี่ยนแปลง DOM แม้ว่าจะไม่ใช่องค์ประกอบเดียวกันก็ตาม
อย่างไรก็ตาม บางครั้งสิ่งต่างๆ ที่มี view-transition-name ต่างกันก็ควรใช้ภาพเคลื่อนไหวประเภทเดียวกัน ซึ่งตอนนี้หมายความว่าต้องเพิ่มกฎตัวเลือกสําหรับ view-transition-name ทุกรายการ
เราต้องการเพิ่มวิธีสร้างคลาสของทรานซิชันเพื่อแก้ปัญหานี้
ละเว้นองค์ประกอบนอกหน้าจอ
หากคุณให้ view-transition-name กับองค์ประกอบ องค์ประกอบนั้นจะมีส่วนร่วมในการเปลี่ยนแปลงเป็นกลุ่มของตัวเอง บางครั้งวิธีนี้อาจไม่เหมาะ เช่น หากคุณกำหนด view-transition-name ให้กับส่วนหัว และเปลี่ยนจากสถานะที่เลื่อนลง 2,000 พิกเซล ไปยังสถานะที่ด้านบนของหน้า ส่วนหัวจะแสดงภาพเคลื่อนไหวจากระยะ 2,000 พิกเซล ซึ่งดูไม่ถูกต้องในแง่ของเวลา
แต่เราต้องการเพิ่มการเลือกใช้ที่ระบบจะไม่สนใจองค์ประกอบ ราวกับว่าองค์ประกอบนั้นไม่มี view-transition-name หากอยู่นอกวิวพอร์ตทั้งหมด
คุณทําสิ่งนี้ได้อยู่แล้วด้วย JavaScript โดยการตั้งค่า style.viewTransitionName แบบไดนามิก แต่เราคิดว่าควรจะมีโซลูชันแบบประกาศสําหรับการดำเนินการนี้
ภาพเคลื่อนไหวที่ขับเคลื่อนโดย requestAnimationFrame
คุณสามารถสร้างภาพเคลื่อนไหวการเปลี่ยนมุมมองด้วย JavaScript ผ่าน Web Animations API อยู่แล้ว แต่บางครั้งคุณอาจต้องควบคุมเฟรมทีละเฟรมด้วย requestAnimationFrame
คุณทำแบบนั้นได้อยู่แล้ว แต่อาจต้องใช้เวลาสักหน่อย ดูการสาธิตพร้อมตัวช่วยบางส่วนที่คุณอาจพบว่ามีประโยชน์ เราต้องการทำให้กระบวนการนี้ง่ายขึ้น
เราจะดำเนินการนี้ 2 ส่วน ประการที่หนึ่งคือ ระบุ API เพื่อระบุว่าภาพเคลื่อนไหวเสร็จสิ้นแล้ว และที่ 2 คือการให้สิทธิ์ JavaScript เข้าถึงองค์ประกอบจำลอง ส่วนที่สองอาจเป็นเรื่องใหญ่ แต่เราคิดว่าเป็นสิ่งถูกต้องที่ควรทำในระยะยาว
ทีนี้ก็ไปสร้างทรานซิชันมุมมองที่ยอดเยี่ยมกัน
เราหวังว่าคุณจะตื่นเต้นกับปัจจุบันและอนาคตของฟีเจอร์นี้เหมือนกับเรา หากมีความคิดเห็นหรือต้องการแสดงตัวอย่างทรานซิชันของมุมมองที่คุณสร้างขึ้น ไม่ว่าจะเป็นทรานซิชันที่ราบรื่นและใช้งานได้จริง หรือแค่โง่ๆ เฉยๆ โปรดติดต่อเราทาง Twitter หรือ Mastodon