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

เปลี่ยนได้อย่างราบรื่นด้วย View Transition API

Bramus

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

สถานการณ์ทั่วไปที่คุณจะใช้ทรานซิชันของมุมมอง ได้แก่

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

การเปลี่ยนฉากที่สร้างด้วย View Transition API ลองใช้เว็บไซต์เดโม ต้องใช้ Chrome 111 ขึ้นไป

ใช้การเปลี่ยนมุมมอง

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

การเปลี่ยนฉากทั้ง 2 ประเภทใช้บล็อกและหลักการเดียวกัน

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

สิ่งหนึ่งที่แตกต่างกันระหว่างโฆษณาทั้ง 2 ประเภทคือวิธีทริกเกอร์

การเปลี่ยนมุมมองเอกสารเดียวกัน

เมื่อการเปลี่ยนมุมมองทำงานในเอกสารเดียว เราจะเรียกว่าการเปลี่ยนมุมมองในเอกสารเดียวกัน ซึ่งมักเกิดขึ้นในแอปพลิเคชันหน้าเว็บเดียว (SPA) Chrome รองรับการเปลี่ยนมุมมองในเอกสารเดียวกันตั้งแต่ Chrome 111

Browser Support

Source

วิธีทริกเกอร์

ทริกเกอร์การเปลี่ยนมุมมองเอกสารเดียวกันโดยเรียกใช้ document.startViewTransition ดังนี้

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(>() = updateTheDOMSomehow());
}

ตัวอย่าง

ตัวอย่างการ์ดต่อไปนี้เป็น SPA ที่ใช้การเปลี่ยนมุมมองในเอกสารเดียวกันเพื่อเคลื่อนไหวการ์ดเมื่อมีการเพิ่มหรือนำการ์ดใหม่ออก

การบันทึกการสาธิตการ์ด ต้องใช้ Chrome 111 ขึ้นไป

เริ่มสร้าง

โปรดดูหน้าเอกสารประกอบเฉพาะเพื่อดูข้อมูลทั้งหมดเกี่ยวกับการเปลี่ยนฉากมุมมองในเอกสารเดียวกัน

สร้างการเปลี่ยนฉากมุมมองเอกสารเดียวกัน

การเปลี่ยนมุมมองระหว่างเอกสาร

เมื่อเกิดการเปลี่ยนมุมมองระหว่างเอกสาร 2 ฉบับที่แตกต่างกัน เราจะเรียกว่าการเปลี่ยนมุมมองข้ามเอกสาร ซึ่งเป็นเรื่องปกติสำหรับ MPA Chrome 126 ขึ้นไปรองรับการเปลี่ยนฉากระหว่างเอกสาร

Browser Support

Source

วิธีทริกเกอร์

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

หากต้องการเลือกใช้ ให้ใช้ข้อมูลโค้ด CSS ต่อไปนี้

@view-transition {
  navigation: auto;
}

ตัวอย่าง

ตัวอย่าง Stack Navigator ต่อไปนี้เป็น MPA ที่ใช้การเปลี่ยนมุมมองแบบข้ามเอกสารระหว่างเอกสาร 2 รายการที่แตกต่างกัน หน้าเว็บจะถูกส่งไปยังสแต็กหรือออกจากสแต็ก ทั้งนี้ขึ้นอยู่กับว่าคุณจะเจาะลึกการนำทางหรือไม่

การบันทึกการสาธิต Stack Navigator ต้องใช้ Chrome 126 ขึ้นไป

เริ่มสร้าง

ดูข้อมูลทั้งหมดเกี่ยวกับการเปลี่ยนฉากการดูข้ามเอกสาร

สร้างการเปลี่ยนฉากมุมมองข้ามเอกสาร