การเปลี่ยนองค์ประกอบกลุ่ม

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

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

1. กำหนดชื่อที่ไม่ซ้ำกันและชั้นเรียนที่แชร์

   องค์ประกอบแต่ละรายการที่ต้องติดตามแยกกันระหว่างการเปลี่ยนภาพต้องมี view-transition-name ที่ไม่ซ้ำกัน

   <!-- Mandatory: Each element must have a unique view-transition-name -->
   <li style="view-transition-name: item-1" class="item">Item 1</li>
   <li style="view-transition-name: item-2" class="item">Item 2</li>
   

   หากต้องการใช้สไตล์ที่แชร์ ให้กำหนด view-transition-class ด้วย

   .item {
     view-transition-class: list-item;
   }
   

2. กำหนดตรรกะการเปลี่ยนภาพที่ใช้ร่วมกัน

   ใช้องค์ประกอบเทียม ::view-transition-group() กับตัวเลือกคลาสเพื่อใช้สไตล์กับสมาชิกทั้งหมดของกลุ่มนั้น

   /* Targets any view transition group that has the 'list-item' class */
   ::view-transition-group(.list-item) {
     animation-duration: 0.5s;
     animation-timing-function: ease-in-out;
   }
   
   /* Handle accessibility by respecting motion preferences */
   @media (prefers-reduced-motion: reduce) {
     /* Disable all group transitions, including the default `root` group. */
     ::view-transition-group(*),
     ::view-transition-old(*),
     ::view-transition-new(*) {
       animation: none !important;
     }
   }
   

3. ไม่บังคับ: กำหนดภาพเคลื่อนไหวสำหรับการเข้าและออกฉาก

   ใช้ตัวเลือก :only-child เพื่อเพิ่มการเปลี่ยนเฉพาะให้กับองค์ประกอบที่เพิ่มหรือนำออก องค์ประกอบจำลอง ::view-transition-new() และ ::view-transition-old() เป็นองค์ประกอบย่อยขององค์ประกอบจำลอง ::view-transition-image-pair() ดังนั้นเราจึงระบุได้ว่าเป็นองค์ประกอบที่เพิ่มหรือนำออกหากเป็นองค์ประกอบย่อยเพียงรายการเดียว

   /* A `::view-transition-new()` element is the only child if it wasn't present before the view transition, so it is an added element. */
   ::view-transition-new(.list-item):only-child {
     animation-name: slide-in;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   /* A `::view-transition-old()` element is the only child if it isn't present after the view transition, so it is a removed element. */
   ::view-transition-old(.list-item):only-child {
     animation-name: slide-out;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   
   @keyframes slide-in {
     from {
       translate: -100vw 0;
     }
   }
   @keyframes slide-out {
     to {
       translate: -100vw 0;
     }
   }
   

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

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

   function updateList(newData) {
     document.startViewTransition(() => {
       // All DOM changes inside this callback will be transitioned
       render(newData);
     });
   }
   

5. คงความสามารถในการโต้ตอบขององค์ประกอบที่ไม่มีการเปลี่ยนผ่าน

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

::view-transition {
  /* Non-transitioned elements below the view transitions remain interactive */
  pointer-events: none;
}

นอกจากนี้ โดยค่าเริ่มต้น องค์ประกอบ :root จะมี View Transition ชื่อ root ซึ่งเปิดใช้การเปลี่ยนหน้าแบบเต็มหน้าเริ่มต้น หากไม่มีการเปลี่ยนแปลงองค์ประกอบรูท การดำเนินการนี้จะเป็นการเปลี่ยนระหว่างสแนปชอตที่เหมือนกัน 2 รายการซึ่งไม่เป็นแบบอินเทอร์แอกทีฟ เนื่องจากเราเปลี่ยนเฉพาะองค์ประกอบบางอย่าง ไม่ใช่ทั้งหน้าจอ เราจึงปิดใช้การเปลี่ยน root ได้

:root {
  /* Disable the root transition because we are only transitioning specific elements. */
  view-transition-name: none;
}

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

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

if (document.startViewTransition) {
  document.startViewTransition(() => updateDOM());
} else {
  // Fallback: Perform the update without animation
  updateDOM();
}

สำหรับ CSS เบราว์เซอร์ที่ไม่รู้จัก view-transition-class หรือตัวเลือกคลาส ::view-transition-group() จะไม่สนใจกฎเหล่านั้น และจะไม่มีการใช้ภาพเคลื่อนไหว