มีอะไรใหม่เกี่ยวกับการเปลี่ยนมุมมอง (ข้อมูลอัปเดตเกี่ยวกับ 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กฎ @ และตั้งค่าตัวอธิบาย navigation เป็น auto

@view-transition {
  navigation: auto;
}

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

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

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

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

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

สาธิต

การสาธิต Stack 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 คือฟังก์ชันเรียกกลับที่อัปเดต DOM และ types คือลำดับของสตริง

const direction = determineBackwardsOrForwards();

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

สําหรับการเปลี่ยนฉากระหว่างเอกสาร ให้ตั้งค่าประเภทในกฎ @view-transition at โดยใช้ตัวอธิบาย 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 แทน