การเปลี่ยนผ่านการนำทางตามทิศทาง

แอปพลิเคชันหน้าเว็บเดียว (SPA) จะแสดงลักษณะของการนําทางโดยการแทนที่เนื้อหาของหน้าโดยไม่ต้องไปยังหน้าใหม่ โดยค่าเริ่มต้น ระบบจะแทนที่เนื้อหาโดยไม่มีการเปลี่ยนฉาก การเปลี่ยนภาพตามทิศทางสามารถเสริมความสัมพันธ์เชิงพื้นที่ระหว่างมุมมองต่างๆ ได้อย่างชัดเจน

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

ขั้นตอนการติดตั้งใช้งาน

1. ตรวจจับทิศทางการนำทาง: ตรวจสอบว่าผู้ใช้กำลังเลื่อน "ไปข้างหน้า" หรือ "ย้อนกลับ" ในขั้นตอนของแอปพลิเคชัน วิธีตรวจจับทิศทางจะขึ้นอยู่กับกรณีการใช้งานของคุณ
2. ทริกเกอร์การเปลี่ยนผ่านด้วยประเภท: ส่งทิศทางในอาร์เรย์ types ไปยัง document.startViewTransition() เพื่อจัดหมวดหมู่การเปลี่ยนผ่าน
3. กำหนดภาพเคลื่อนไหวตามทิศทางด้วย CSS: ใช้คลาสเทียม :active-view-transition-type() เพื่อใช้ภาพเคลื่อนไหวที่เฉพาะเจาะจงตามประเภทการนำทาง

การกำหนดคีย์เฟรม

กำหนดภาพเคลื่อนไหวแบบเลื่อนไปและกลับจากแต่ละทิศทาง เพื่อประสิทธิภาพที่ดีที่สุด ให้ทำให้การเปลี่ยนตำแหน่งเคลื่อนไหวโดยใช้พร็อพเพอร์ตี้ transform หรือพร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการ ได้แก่ scale, rotate และ translate โดยทั่วไป opacity ก็มีประสิทธิภาพเช่นกัน แต่ให้หลีกเลี่ยงการสร้างภาพเคลื่อนไหวให้กับพร็อพเพอร์ตี้ CSS อื่นๆ โดยไม่ตรวจสอบก่อนว่าพร็อพเพอร์ตี้เหล่านั้นไม่ได้ทริกเกอร์เลย์เอาต์หรือการวาด

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

ตั้งค่าภาพเคลื่อนไหวที่แชร์

ใช้ตัวเลือก ::view-transition-group(root) เพื่อใช้การตั้งค่าภาพเคลื่อนไหวที่ใช้ร่วมกันในทรานซิชันทั้งหมด

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

การใช้ภาพเคลื่อนไหวตามทิศทาง

ใช้คลาสเทียม active-view-transition-type เพื่อกำหนดเป้าหมายมุมมองการเปลี่ยนภาพโดยเฉพาะเมื่อประเภท "ไปข้างหน้า" หรือ "ย้อนกลับ" ทำงานอยู่

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

การทริกเกอร์การเปลี่ยนผ่าน

เมื่อไปยังส่วนต่างๆ ให้ส่งประเภทที่เหมาะสมไปยังเมธอด startViewTransition

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

การช่วยเหลือพิเศษ

เคารพค่ากำหนดของผู้ใช้สำหรับการลดการเคลื่อนไหวเสมอโดยการปิดใช้หรือลดความซับซ้อนของภาพเคลื่อนไหว

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

กลยุทธ์สำรอง

View Transitions API เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง ในเบราว์เซอร์ที่ไม่รองรับ document.startViewTransition จะเป็น undefined คุณต้องรวมตรรกะการนําทางไว้ในการตรวจสอบการตรวจหาฟีเจอร์เพื่อให้แน่ใจว่าการอัปเดต DOM ยังคงเกิดขึ้นทันทีโดยไม่มีภาพเคลื่อนไหว ดังที่แสดงในฟังก์ชันตัวช่วยนี้

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}