View Transition API ช่วยให้คุณอัปเดต DOM ได้ในขั้นตอนเดียว พร้อมกับสร้างการเปลี่ยนแบบเคลื่อนไหวระหว่าง 2 สถานะ
การเปลี่ยนรุ่นเหล่านี้เป็นฟีเจอร์ที่ขอกันเข้ามาบ่อยๆ จากนักพัฒนาซอฟต์แวร์ รวมถึงผมด้วย และผมคิดว่าเราสามารถนำมาใช้ในแบบที่สร้างความสมดุลระหว่างความสามารถในการขยายการใช้งานและการปรับแต่งให้เหมาะสม ดูเหมือนว่าเราจะต้องปรบมืออยู่เหมือนกัน แต่ความคิดเห็นของนักพัฒนาซอฟต์แวร์คือกุญแจสำคัญในการออกแบบฟีเจอร์นี้ ต้นแบบก่อนหน้านี้ของฟีเจอร์นี้มีความยืดหยุ่นน้อยกว่ามาก นอกจากนี้ เพื่อนๆ (เช่นคุณ) ที่สละเวลามาเล่นต้นแบบและแสดงความคิดเห็นทำให้เกิดการทบทวนอย่างสิ้นเชิง ขอขอบคุณ
หากต้องการทำความเข้าใจเกี่ยวกับฟีเจอร์นี้และเล่นการสาธิตบางส่วน โปรดดูคำแนะนำของเรา หากมีสิ่งใดที่คุณคิดว่าไม่ครอบคลุม โปรดติดต่อเราทาง Twitter, Mastodon หรือทางอีเมล
ปัจจุบัน View Transition API พร้อมใช้งานใน Chrome เท่านั้น โชคดีที่สามารถใช้เป็นการปรับปรุงแบบก้าวหน้า คู่มือนี้มีฟังก์ชันตัวช่วยที่คุณสามารถใช้ได้ในเบราว์เซอร์ต่างๆ แต่เฉพาะเบราว์เซอร์ที่รองรับการเปลี่ยนมุมมองเท่านั้นที่จะเห็นภาพเคลื่อนไหว
เราพัฒนาฟีเจอร์นี้ภายในคณะทำงานของ CSS โดยใช้ข้อมูลจากผู้ให้บริการเบราว์เซอร์และผู้ให้บริการอิสระรายอื่นๆ เราไม่รู้ว่าเบราว์เซอร์อื่นๆ จะใช้ View Transitions หรือไม่หรือเมื่อใด แต่โปรดติดตามตำแหน่งมาตรฐานของ 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 จะกำหนดขอบเขตของทั้งเอกสาร และจะดำเนินการเปลี่ยนได้ทีละรายการเท่านั้น เราขอแนะนําฟีเจอร์ที่ช่วยให้กำหนดขอบเขตการเปลี่ยนไปยังองค์ประกอบหนึ่งๆ ได้ เพื่อให้คอมโพเนนต์ของหน้าเว็บหลายรายการเรียกใช้การเปลี่ยนได้อย่างอิสระ
ซึ่งจะทำให้โปรแกรมเล่นวิดีโอแบบฝังสามารถใช้การเปลี่ยนมุมมองพร้อมกับวิดเจ็ตแชทที่ฝังได้
กลุ่มการเปลี่ยนที่ซ้อนกัน
ขณะนี้ ::view-transition-group ทั้งหมดเป็นพี่น้อง ซึ่งมักจะเป็นเรื่องที่ดี เนื่องจากจะทำให้มุมมองเปลี่ยนจากคอนเทนเนอร์หนึ่งไปอีกคอนเทนเนอร์หนึ่งได้ และคุณไม่ต้องกังวลเรื่องการตัดคลิป
อย่างไรก็ตาม ในบางครั้งคุณอาจต้องการให้มีการตัดมุมมองออกโดยผู้ปกครองบางคน ซึ่งอาจมีส่วนร่วมในการเปลี่ยนผ่านดังกล่าว
เราต้องการตรวจสอบการเลือกใช้ที่วาง ::view-transition-group หนึ่งๆ ไว้ใน ::view-transition-group อื่น
คลาสของการเปลี่ยน
view-transition-name แต่ละรายการต้องไม่ซ้ำกัน นี่คือวิธีที่เราระบุว่าองค์ประกอบหนึ่งๆ มีแนวคิด "เหมือนกัน" ในด้านใดด้านหนึ่งของการเปลี่ยนแปลง 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 Animation API ได้อยู่แล้ว แต่บางครั้งคุณต้องการแสดงผลแบบเฟรมต่อเฟรมด้วย requestAnimationFrame
คุณทำได้อยู่แล้วค่ะ แต่อาจจะยากหน่อย นี่คือการสาธิตพร้อมผู้ช่วยที่อาจเห็นว่ามีประโยชน์ เราอยากให้แอปไม่ถูกแฮ็ก!
โดยเราจะแบ่งเป็น 2 ส่วน 1. มอบ API เพื่อระบุเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ และข้อ 2 คือให้สิทธิ์เข้าถึง JavaScript แก่องค์ประกอบเทียม ส่วนที่ 2 นั้นอาจเป็นงานใหญ่พอสมควร แต่ก็รู้สึกว่าเป็นสิ่งที่ควรทำในระยะยาว
ทีนี้ก็ไปเปลี่ยนมุมมองเจ๋งๆ ได้เลย!
เราหวังว่าคุณคงตื่นเต้นเกี่ยวกับปัจจุบันและอนาคตของฟีเจอร์นี้เช่นเดียวกับเรา หากคุณมีความคิดเห็นใดๆ หรือเพียงแค่ต้องการอวดการเปลี่ยนมุมมองของคุณ ไม่ว่าจะราบรื่นและใช้งานได้ หรือแค่ไร้สาระ ไร้สาระ โปรดติดต่อเราทาง Twitter หรือ Mastodon