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

Bramus

เผยแพร่: 16 พฤษภาคม 2024

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

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

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

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

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

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

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

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

หากต้องการเปิดใช้การเปลี่ยนมุมมองข้ามเอกสาร ปลายทางทั้ง 2 ด้านต้องเลือกใช้ โดยให้ใช้ @view-transition at-rule และตั้งค่าตัวระบุ 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 ช่วยให้คุณสามารถเพิ่มชื่อที่แชร์ลงในภาพรวมทั้งหมดได้แล้ว ใช้ชื่อที่แชร์นี้ในตัวเลือกเสมือนเพื่อกําหนดเป้าหมายสแนปชอตทั้งหมดที่ตรงกัน การดำเนินการนี้ทำให้ตัวเลือกง่ายขึ้นมาก ซึ่งจะปรับขนาดจากองค์ประกอบเดียวเป็นหลายองค์ประกอบโดยอัตโนมัติ

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

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

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

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

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

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

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

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

สำหรับการเปลี่ยนมุมมองในเอกสารเดียวกัน ให้ส่ง types ไปยังเมธอด startViewTransition ซึ่งตอนนี้ยอมรับออบเจ็กต์แล้ว update คือฟังก์ชัน Callback ที่อัปเดต 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 แทน