มีอะไรใหม่ในการเปลี่ยนฉาก (อัปเดตปี 2025)

Bramus

เผยแพร่: 8 ต.ค. 2025

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

ในปี 2024 เราได้เปิดตัวการเปลี่ยนฉากมุมมองข้ามเอกสาร เพิ่มการปรับแต่ง เช่น view-transition-class และประเภทการเปลี่ยนฉากมุมมอง รวมถึงยินดีต้อนรับ Safari ที่เพิ่มการรองรับการเปลี่ยนฉากมุมมอง

โพสต์นี้จะแสดงภาพรวมของการเปลี่ยนแปลงเกี่ยวกับทรานซิชันของมุมมองในปี 2025

การรองรับเบราว์เซอร์และเฟรมเวิร์กที่ดีขึ้น

การเปลี่ยนมุมมองเอกสารเดียวกันกำลังจะกลายเป็นฟีเจอร์พื้นฐานที่พร้อมใช้งานใหม่

หนึ่งในหัวข้อสำคัญของ Interop 2025 คือ View Transition API โดยเฉพาะการเปลี่ยนมุมมองในเอกสารเดียวกันด้วย document.startViewTransition(updateCallback), view-transition-class, การตั้งชื่ออัตโนมัติด้วย view-transition-name: match-element และตัวเลือก CSS :active-view-transition

Firefox ตั้งใจที่จะรวมฟีเจอร์เหล่านี้ไว้ใน Firefox 144 ที่กำลังจะเปิดตัว ซึ่งจะกลายเป็นเวอร์ชันเสถียรในวันที่ 14 ตุลาคม 2025 ซึ่งจะทำให้ฟีเจอร์เหล่านี้เป็นฟีเจอร์ใหม่ที่พร้อมใช้งานใน Baseline

ตอนนี้ React Core รองรับ View Transition API แล้ว

ตลอดทั้งปี ทีม React ได้ทำงานเพื่อเพิ่มการเปลี่ยนมุมมองลงในแกนหลักของ React โดยได้ประกาศreact@experimentalการรองรับไปเมื่อเดือนเมษายน และในสัปดาห์นี้ที่ React Conf ก็ได้ย้ายการรองรับดังกล่าวไปไว้ใน react@canary ซึ่งหมายความว่าการออกแบบใกล้จะเสร็จสมบูรณ์แล้ว

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

คุณดูรายละเอียดทั้งหมดได้ในเอกสารประกอบของ <ViewTransition>React หรือดูการพูดคุยนี้โดย Aurora Scharff เพื่อดูข้อมูลเบื้องต้นเกี่ยวกับหัวข้อนี้

ฟีเจอร์ที่เปิดตัวล่าสุด

ตั้งชื่อองค์ประกอบโดยอัตโนมัติด้วย view-transition-name: match-element

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

อย่างไรก็ตาม การตั้งชื่อองค์ประกอบที่ไม่ซ้ำกันอาจกลายเป็นเรื่องยุ่งยากเมื่อเปลี่ยนองค์ประกอบจำนวนมากที่ไม่ได้เปลี่ยนแปลงจริงๆ หากมีองค์ประกอบ 100 รายการที่เคลื่อนไหวในลิสต์ คุณจะต้องตั้งชื่อที่ไม่ซ้ำกัน 100 ชื่อ

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

การสาธิตต่อไปนี้ใช้วิธีนี้ การ์ดแต่ละใบในแถวจะมี view-transition-name ที่สร้างขึ้นโดยอัตโนมัติ

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

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

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

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

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

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

กลุ่มการเปลี่ยนมุมมองที่ซ้อนกันจะพร้อมใช้งานใน Chrome 140

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

แนวทางแบบโครงสร้างแบนนี้เพียงพอสำหรับกรณีการใช้งานหลายอย่าง แต่จะกลายเป็นปัญหาเมื่อใช้เอฟเฟกต์ภาพ เช่น การครอบตัดหรือการเปลี่ยนรูปแบบ 3 มิติ ซึ่งต้องมีลำดับชั้นในโครงสร้าง

ตอนนี้คุณสามารถซ้อนองค์ประกอบเสมือน ::view-transition-group ภายในกันได้แล้วด้วย"กลุ่มการเปลี่ยนมุมมองที่ซ้อนกัน" เมื่อซ้อนกลุ่มการเปลี่ยนฉาก คุณจะกู้คืนเอฟเฟกต์ต่างๆ เช่น การครอบตัด ในระหว่างการเปลี่ยนฉากได้

ดูวิธีใช้กลุ่มการเปลี่ยนมุมมอง

ตอนนี้องค์ประกอบเสมือนจะรับค่าพร็อพเพอร์ตี้ภาพเคลื่อนไหวเพิ่มเติม

เมื่อตั้งค่าพร็อพเพอร์ตี้แบบยาว animation-* รายการใดรายการหนึ่งใน ::view-transition-group(…) เทียม ::view-transition-image-pair(…), ::view-transition-old(…) และ ::view-transition-new(…) ที่มีอยู่จะรับค่าพร็อพเพอร์ตี้นั้นด้วย ซึ่งมีประโยชน์เนื่องจากจะช่วยให้การครอสเฟดระหว่าง::view-transition-new(…)กับ::view-transition-old(…)ซิงค์กับ::view-transition-group(…)โดยอัตโนมัติ

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

ในตอนแรก การรับค่านี้จำกัดไว้ที่ animation-duration และ animation-fill-mode (และต่อมาก็รวมถึง animation-delay ด้วย) แต่ตอนนี้เราได้ขยายการรับค่าให้ครอบคลุมแอตทริบิวต์แบบยาวของภาพเคลื่อนไหวมากขึ้น

เบราว์เซอร์ที่รองรับการเปลี่ยนมุมมองควรมีสิ่งต่อไปนี้ในสไตล์ชีต User Agent

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

องค์ประกอบเสมือนที่รับค่าพร็อพเพอร์ตี้เพิ่มเติมเปิดตัวใน Chrome 140

การดำเนินการของ Callback ของ Promise finished จะไม่ต้องรอเฟรมอีกต่อไป

เมื่อใช้finishedสัญญาเพื่อเรียกใช้การเรียกกลับ Chrome เคยรอให้สร้างเฟรมก่อนจึงจะเรียกใช้ตรรกะนั้น ซึ่งอาจทำให้เกิดการกะพริบที่ส่วนท้ายของภาพเคลื่อนไหวเมื่อสคริปต์ย้ายรูปแบบบางอย่างเพื่อพยายามรักษาสถานะที่คล้ายกันในเชิงภาพ

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

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

การเปลี่ยนแปลงเวลานี้จะเปิดตัวใน Chrome 140

ฟีเจอร์ที่จะเพิ่มใหม่เร็วๆ นี้

ปีนี้ยังไม่จบ ดังนั้นเรายังมีเวลาเปิดตัวฟีเจอร์อื่นๆ อีก

การเปลี่ยนฉากที่กำหนดขอบเขตพร้อมให้ทดสอบใน Chrome 140 แล้ว

การเปลี่ยนฉากของมุมมองที่กำหนดขอบเขตเป็นส่วนขยายที่เสนอสำหรับ View Transition API ซึ่งช่วยให้คุณเริ่มการเปลี่ยนฉากของมุมมองในส่วนย่อยของ DOM ได้โดยการเรียก element.startViewTransition() (แทน document.startViewTransition()) ใน HTMLElement ใดก็ได้

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

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

ฟีเจอร์นี้พร้อมให้ทดสอบตั้งแต่ Chrome 140 โดยเปิดใช้ Flag "ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง" ใน chrome://flags เรากำลังพยายามขอความคิดเห็นจากนักพัฒนาแอป

ตำแหน่งของ ::view-transition จะเปลี่ยนจาก fixed เป็น absolute ใน Chrome 142

ขณะนี้ระบบใช้ position: fixed เพื่อระบุตำแหน่งของ ::view-transition แบบเสมือน ตามมติของกลุ่มทำงาน CSS ค่านี้จะเปลี่ยนเป็น position: absolute

การเปลี่ยนแปลงค่า position จาก fixed เป็น absolute ซึ่งจะมาพร้อมกับ Chrome 142 นั้นไม่สามารถสังเกตได้ด้วยตาเปล่า เนื่องจากบล็อกที่ประกอบด้วยองค์ประกอบเสมือน ::view-transition เป็นบล็อกที่ประกอบด้วยสแนปชอตอยู่แล้ว ผลลัพธ์ที่สังเกตได้เพียงอย่างเดียวคือค่า position ที่แตกต่างกันเมื่อทำ getComputedStyle

document.activeViewTransition จะพร้อมใช้งานใน Chrome 142

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

ตอนนี้ Chrome มีพร็อพเพอร์ตี้ document.activeViewTransition ที่แสดงออบเจ็กต์นี้แล้ว คุณจึงไม่ต้องติดตามอินสแตนซ์นี้ด้วยตนเอง หากไม่มีการเปลี่ยนผ่าน ค่าจะเป็น null

สำหรับการเปลี่ยนมุมมองในเอกสารเดียวกัน ระบบจะตั้งค่าเมื่อคุณเรียกใช้ document.startViewTransition สำหรับการเปลี่ยนมุมมองข้ามเอกสาร คุณจะเข้าถึงอินสแตนซ์ ViewTransition นั้นได้ในเหตุการณ์ pageswap และ pagereveal

การรองรับ document.activeViewTransition จะพร้อมใช้งานใน Chrome 142

ป้องกันไม่ให้การเปลี่ยนฉากมุมมองสิ้นสุดโดยอัตโนมัติด้วย ViewTransition.waitUntil

การเปลี่ยนมุมมองจะเข้าสู่สถานะ finished โดยอัตโนมัติเมื่อภาพเคลื่อนไหวทั้งหมดเสร็จสิ้น คุณจะใช้ ViewTranistion.waitUntil ได้ในเร็วๆ นี้เพื่อป้องกันไม่ให้ระบบปิดการบันทึกโดยอัตโนมัติ เมื่อส่งพรอมิส ViewTransition จะเข้าสู่สถานะ finished ก็ต่อเมื่อพรอมิสที่ส่งมาได้รับการแก้ไขแล้วเช่นกัน

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

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

ขั้นตอนถัดไป

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

หากมีคำถามเกี่ยวกับการเปลี่ยนฉาก โปรดติดต่อเราทางโซเชียลมีเดีย คุณยื่นคำขอฟีเจอร์สำหรับการเปลี่ยนฉากได้ที่ CSS WG หากพบข้อบกพร่อง โปรดรายงานข้อบกพร่องของ Chromium เพื่อแจ้งให้เราทราบ