ดูการเปลี่ยนสำหรับแอปพลิเคชันหน้าเว็บเดียว

รูปแบบทั่วไปสำหรับหน้าเว็บคือการใช้ JavaScript เพื่อแทนที่เนื้อหาในหน้าแบบไดนามิกโดยไม่ต้องโหลดเอกสาร HTML ใหม่แบบเต็ม ซึ่งเรียกว่าแอปพลิเคชันหน้าเว็บเดียว หรือ SPA การเปลี่ยนหน้าเว็บช่วยให้คุณแสดงความต่อเนื่องหรือบริบทระหว่างหน้าเว็บใน SPA ได้

การเปลี่ยนหน้าทั้งหน้า

เมื่อผู้ใช้ไปยังมุมมองใหม่ใน SPA เฟรมเวิร์กจะแทนที่ DOM ด้วยเนื้อหาใหม่ ซึ่งจะทำให้เนื้อหาปรากฏขึ้นทันที แต่หากต้องการเปลี่ยนจากเนื้อหาปัจจุบันไปยังเนื้อหาใหม่ล่ะ

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

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

document.startViewTransition(() => updateTheDOMSomehow());

ซึ่งจะเปิดใช้การเปลี่ยนค่าเริ่มต้นที่จะค่อยๆ จางมุมมองเก่าออกไปพร้อมกับค่อยๆ จางมุมมองใหม่เข้ามา

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

// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
  updateTheDOMSomehow();
  return;
} else {
  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

การปรับแต่งการเปลี่ยน

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

คุณระบุการเปลี่ยนฉากออกด้วย ::view-transition-old() และการเปลี่ยนฉากเข้าด้วย ::view-transition-new() นอกจากนี้ คุณยังระบุค่าสำหรับทั้ง 2 อย่างด้วย ::view-transition-group() ได้ด้วย

ในตัวอย่างนี้ มุมมองเก่าจะเปลี่ยนออกโดยใช้การเปลี่ยน slide-out-to-left และมุมมองใหม่จะเปลี่ยนเข้าโดยใช้การเปลี่ยน slide-in-from-right โดยทั้ง 2 รายการจะมีระยะเวลา 200 มิลลิวินาที

::view-transition-group(root){
  animation-duration: 200ms;
}

::view-transition-old(root) {
  animation-name: slide-out-to-left;
}

::view-transition-new(root) {
  animation-name: slide-in-from-right;
}

การเปลี่ยนฉากที่แตกต่างกันตามบริบท

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

คุณระบุภาพเคลื่อนไหวต่างๆ ได้โดยใช้:active-view-transition-type()คลาสจำลอง

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }
}

จากนั้นคุณจะเลือกประเภทการเปลี่ยนฉากที่จะใช้เมื่อเรียกใช้ document.startViewTransition() ได้

const direction = next === 'home' ? 'backwards' : 'forwards';

document.startViewTransition({
  update: updateTheDOMSomehow,
  types: [direction],
});

การเปลี่ยนองค์ประกอบที่เฉพาะเจาะจง

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

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

ก่อนอื่น คุณต้องระบุองค์ประกอบที่จะเปลี่ยนโดยใช้พร็อพเพอร์ตี้ view-transition-name หากต้องการให้การเปลี่ยนมุมมองทำงานได้ สำหรับแต่ละview-transition-name จะต้องมีองค์ประกอบ 1 รายการก่อนที่คุณจะเรียกใช้ document.startViewTransition() และมีองค์ประกอบ 1 รายการหลังจากที่การเรียกกลับใน document.startViewTransition() เสร็จสมบูรณ์

ในตัวอย่างนี้ มีเครื่องเล่นเพลงที่แสดงอาร์ตเวิร์กของอัลบั้ม ชื่อ และศิลปิน มุมมองอื่นจะแสดงเนื้อหาเดียวกันที่จัดเรียงใหม่ พร้อมเพิ่มเนื้อเพลง

ในตัวอย่างก่อนหน้า มีองค์ประกอบที่เปลี่ยนผ่านอย่างละ 1 รายการในมุมมองเก่าและใหม่ และองค์ประกอบเหล่านั้นยังใช้ตัวเลือกเดียวกันด้วย องค์ประกอบที่เปลี่ยนจะดูเหมือนเคลื่อนที่ระหว่างขนาดและตำแหน่งขององค์ประกอบ ส่วนที่ไม่ได้เปลี่ยนของมุมมองจะค่อยๆ จางเข้าและจางออก

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

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

คุณมี 2 ตัวเลือกในการแก้ปัญหานี้ คุณเลือกที่จะเพิ่ม view-transition-name ที่ไม่ซ้ำกันสำหรับแต่ละโพสต์ในหน้าแรก แล้วจับคู่ชื่อนั้นกับโพสต์แบบเต็มหน้าแต่ละโพสต์ได้ คุณสร้างข้อมูลเหล่านี้ได้โดยใช้รหัสของโพสต์ อีกทางเลือกหนึ่งคือการใช้ view-transition-name ทั่วไป แต่ให้ใช้หลังจากที่ผู้ใช้คลิกโพสต์แล้ว แต่ก่อนที่จะเรียกใช้ document.startViewTransition()

การออกแบบทรานซิชัน

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

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

บรรทัดแรกมีกฎ width: fit-content ซึ่งเป็นสไตล์ที่มีประโยชน์เมื่อคุณเปลี่ยนข้อความที่ไม่ตัดคำ (หรือมีการตัดคำเหมือนกันทั้งในมุมมองเก่าและใหม่) ไม่เช่นนั้น ทรานซิชันอาจอยู่ระหว่างองค์ประกอบที่มีความกว้างต่างกัน ซึ่งจะทำให้ทรานซิชันไม่ราบรื่น

นอกจากนี้ รูปภาพยังมีสัดส่วนภาพที่แตกต่างกันในมุมมองเก่าและมุมมองใหม่ ตัวอย่างนี้จะแก้ไขภาพเคลื่อนไหวและพร็อพเพอร์ตี้ object-fit เพื่อให้การเปลี่ยนผ่านดูราบรื่น

การเคารพ prefers-reduced-motion

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

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

ทดสอบความเข้าใจ