มีอะไรใหม่เกี่ยวกับการเปลี่ยนมุมมอง (ข้อมูลอัปเดตเกี่ยวกับ Google I/O 2024)

Bramus

ในงาน Google I/O 2024 ฉันได้ประกาศแจ้งขั้นตอนถัดไปของการเปลี่ยนผ่านแบบมุมมอง นั่นคือ การเปลี่ยนมุมมองข้ามเอกสารสำหรับแอปพลิเคชันหลายหน้า (MPA)

นอกจากนี้ เรายังได้แชร์การปรับปรุงที่ช่วยให้คุณทำงานกับการเปลี่ยนมุมมองโดยทั่วไปได้ง่ายขึ้น

• การแชร์รูปแบบภาพเคลื่อนไหวระหว่างองค์ประกอบจำลองการเปลี่ยนมุมมองด้วย view-transition-class
• การเปลี่ยนมุมมองแบบเลือกส่วนที่มีประเภทที่ใช้งานอยู่

การปรับปรุงเหล่านี้มีผลกับทั้งการเปลี่ยนมุมมองเอกสารเดียวกันสำหรับแอปพลิเคชันหน้าเว็บเดียว (SPA) และการเปลี่ยนมุมมองข้ามเอกสารสำหรับ MPA

การเปลี่ยนมุมมองข้ามเอกสารสำหรับ MPA

ใน Chrome 111 ทีม Chrome ได้จัดส่งการเปลี่ยนมุมมองเอกสารเดียวกันสำหรับแอปพลิเคชันแบบหน้าเดียว ซึ่งเป็นฟีเจอร์ที่ได้รับการตอบรับเป็นอย่างดีภายในชุมชนการสร้างเว็บ

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

แต่การติดตั้งใช้งานในช่วงแรกนั้นกำหนดให้คุณต้องสร้าง SPA จึงจะใช้การเปลี่ยนการแสดงผลได้ แต่ใน Chrome 126 ปัญหานี้จะไม่เกิดขึ้นแล้ว ตอนนี้ระบบจะเปิดใช้การเปลี่ยนมุมมองโดยค่าเริ่มต้นสําหรับการนําทางต้นทางเดียวกัน คุณสามารถสร้างการเปลี่ยนมุมมองระหว่างเอกสาร 2 ฉบับที่มีต้นทางเดียวกันได้แล้ว

หากต้องการเปิดใช้การเปลี่ยนมุมมองข้ามเอกสาร อุปกรณ์ทั้ง 2 ฝั่งจะต้องเลือกรับ ในการดำเนินการนี้ ให้ใช้กฎการทำงานของ @view-transition และตั้งค่าข้อบ่งชี้ navigation เป็น auto

@view-transition {
  navigation: auto;
}

การเปลี่ยนมุมมองข้ามเอกสารใช้องค์ประกอบและหลักการเดียวกันกับการเปลี่ยนมุมมองเอกสารเดียวกัน ระบบจะบันทึกองค์ประกอบที่ใช้ view-transition-name และคุณจะปรับแต่งภาพเคลื่อนไหวได้โดยใช้ภาพเคลื่อนไหว CSS

หากต้องการปรับแต่งการเปลี่ยนมุมมองข้ามเอกสาร ให้ใช้เหตุการณ์ pageswap และ pagereveal ซึ่งช่วยให้คุณเข้าถึงออบเจ็กต์การเปลี่ยนมุมมอง

• คุณสามารถใช้ pageswap เพื่อทำการเปลี่ยนแปลงในนาทีสุดท้ายในหน้าขาออกได้ทันทีก่อนที่ระบบจะบันทึกสแนปชอตเก่า
• pagereveal ช่วยให้คุณปรับแต่งหน้าเว็บใหม่ก่อนเริ่มแสดงผลหลังจากที่เริ่มต้นแล้วได้

ในทั้ง 2 เหตุการณ์ คุณจะมีสิทธิ์เข้าถึงออบเจ็กต์ NavigationActivation เพื่อปรับแต่งการเปลี่ยนมุมมองข้ามเอกสารตามรายการประวัติปลายทางเก่าและใหม่ หรือประเภทการนำทาง

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

ข้อมูลประชากร

การสาธิตสแต็ก Navigator นี้รวมฟีเจอร์ทั้งหมดเหล่านี้ไว้ด้วยกัน (และการปรับปรุงบางอย่าง)

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

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

อ่านเอกสารประกอบ

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเปิดใช้งานและปรับแต่งการเปลี่ยนมุมมองข้ามเอกสารได้ที่เอกสารเกี่ยวกับการเปลี่ยนมุมมองข้ามเอกสาร

ดูการปรับปรุงการเปลี่ยน

นอกจากการจัดส่งการเปลี่ยนมุมมองข้ามเอกสารสำหรับ MPA แล้ว Chrome ยังมีการปรับแต่งบางอย่างเพื่อทำงานกับการเปลี่ยนมุมมองโดยทั่วไปด้วย

การปรับปรุงเหล่านี้จะมีผลกับทั้งการเปลี่ยนมุมมองเอกสารเดียวกันสำหรับ SPA และการเปลี่ยนมุมมองข้ามเอกสารสำหรับ MPA

แชร์รูปแบบภาพเคลื่อนไหวกับ view-transition-class

ก่อนหน้านี้ เมื่อทำให้สแนปชอตหลายรายการเคลื่อนไหวด้วยวิธีเดียวกัน คุณต้องกำหนดเป้าหมายสแนปชอตแต่ละรายการทีละรายการโดยทำซ้ำตัวเลือกเทียมกับทุกองค์ประกอบที่มี view-transition-name ที่ไม่ซ้ำกัน

คุณใช้ view-transition-class เพื่อเพิ่มชื่อที่แชร์ไปยังสแนปชอตทั้งหมดได้ ใช้ชื่อที่ใช้ร่วมกันนี้ในตัวเลือกเทียมเพื่อกำหนดเป้าหมายสแนปชอตทั้งหมดที่ตรงกัน ส่งผลให้ตัวเลือกง่ายขึ้นมาก ซึ่งจะปรับขนาดจากองค์ประกอบ 1 ไปยังหลายองค์ประกอบโดยอัตโนมัติ

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

ตัวอย่างการ์ดต่อไปนี้ใช้ view-transition-class เพื่อนำเวลาของภาพเคลื่อนไหวเดียวกันไปใช้กับสแนปชอตหลายรายการโดยใช้ตัวเลือก 1 รายการ

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับ view-transition-class โปรดอ่านเอกสารประกอบเฉพาะใน view-transition-class

การเปลี่ยนมุมมองแบบเลือกส่วนที่มีประเภทที่ใช้งานอยู่

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

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

ก่อนประเภทที่ใช้งานอยู่ คุณสามารถเพิ่มคลาสไปยัง DOM และตอบกลับคลาสเหล่านั้นใน CSS ของคุณ อย่างไรก็ตาม คุณยังจะต้องล้างข้อมูลหลังจากการเปลี่ยนเสร็จสมบูรณ์

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

สำหรับการเปลี่ยนมุมมองเอกสารเดียวกัน ให้ส่ง types ไปยังเมธอด startViewTransition ซึ่งตอนนี้ยอมรับออบเจ็กต์แล้ว update เป็นฟังก์ชันเรียกกลับที่อัปเดต DOM และ types คือลําดับของสตริง

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

สำหรับการเปลี่ยนมุมมองข้ามเอกสาร ให้ตั้งค่าประเภทในกฎ @view-transition โดยใช้ข้อบ่งชี้ types หรือตั้งค่าทันทีในเหตุการณ์ pageswap และ pagereveal

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

เมื่อตั้งค่าประเภทแล้ว คุณจะตอบสนองต่อประเภทเหล่านี้ใน CSS ได้โดยใช้ตัวเลือกคลาสเทียม :active-view-transition-type() และ :active-view-transition ซึ่งใช้กับรูทการเปลี่ยนมุมมอง

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับประเภทการเปลี่ยนมุมมองได้ในเอกสารประกอบเฉพาะสำหรับการเปลี่ยนมุมมองเอกสารเดียวกันและการเปลี่ยนมุมมองข้ามเอกสาร

ความคิดเห็น

เรายินดีรับฟังความคิดเห็นจากนักพัฒนาแอปเสมอ หากต้องการดำเนินการดังกล่าว ให้แจ้งปัญหากับคณะทำงานของ CSS บน GitHub พร้อมคำแนะนำและคำถาม ใส่คำนำหน้าปัญหากับ [css-view-transitions]

หากคุณพบข้อบกพร่อง ให้รายงานข้อบกพร่องของ Chromium แทน