หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Bramus

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

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

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

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

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

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

การรองรับเบราว์เซอร์

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

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

การเปลี่ยนมุมมองเอกสารเดียวกันตามที่เห็นใน 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 เพื่อปรับแต่งการเปลี่ยนมุมมองข้ามเอกสารตามรายการประวัติปลายทางเก่าและใหม่ หรือประเภทการนําทาง

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

ได้

สาธิต

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

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

นี่คือ 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 ระบบจะใช้ animation-timing-function เดียวกันกับการ์ดทั้งหมด ยกเว้นการ์ดที่เพิ่มหรือนําออก

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับ 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],
}););

สําหรับการเปลี่ยนมุมมองข้ามเอกสาร ให้ตั้งค่าประเภทในกฎ at @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 แทน

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

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

สาธิต

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

ดูการปรับปรุงทรานซิชัน

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

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

ความคิดเห็น

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