انتقال‌های عنصر گروهی

وقتی موارد به فهرست اضافه یا از آن حذف می‌شوند، یا دوباره مرتب می‌شوند، انتقال‌ها می‌توانند به کاربران کمک کنند تا زمینه را حفظ کنند. گذار نما راهی برای گذار بین دو حالت یک عنصر با دادن یک 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 دارای یک انتقال نمای به نام root است که انتقال‌های تمام‌صفحه پیش‌فرض را فعال می‌کند. اگر تغییری در عنصر ریشه ایجاد نشود، این یک انتقال بین دو عکس آنی یکسان خواهد بود که تعاملی نیستند. چون فقط عناصر خاصی را انتقال می‌دهیم و نه کل صفحه را، می‌توانیم انتقال root را غیرفعال کنیم.

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

راهبردهای جایگزین

«مشاهده انتقال‌ها» یک ارتقای پیش‌رو است. اگر مرورگر از document.startViewTransition پشتیبانی نمی‌کند، به‌روزرسانی DOM باید همچنان فوراً انجام شود و تجربه‌ای کاربردی اما بدون پویانمایی ارائه دهد.

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

برای CSS، مرورگرهایی که view-transition-class یا گزینشگر کلاس ::view-transition-group() را تشخیص نمی‌دهند، به‌سادگی آن قوانین را نادیده می‌گیرند و هیچ پویانمایی‌ای اعمال نخواهد شد.