انتقال‌های پیمایش جهت‌دار

«برنامه‌های تک‌صفحه‌ای» (SPA) با جایگزین کردن محتوای صفحه بدون پیمایش به صفحه جدید، ظاهر پیمایش را ارائه می‌دهند. به‌طور پیش‌فرض، محتوا به‌سادگی و بدون هیچ‌گونه انتقالی جایگزین می‌شود. گذار جهت‌دار می‌تواند رابطه فضایی بین نماها را به‌صورت بصری تقویت کند.

با لغزاندن محتوای جدید از جهتی که کاربر درحال حرکت است، نقشه‌ای ذهنی از ساختار برنامه ایجاد می‌کنید. برای مثال، سایت محصول ممکن است برای «جلو» انتقال به راست و برای «عقب» انتقال به چپ را نشان دهد، یا نمایش اسلاید ممکن است برای نشان دادن اسلایدهای بعدی و قبلی به بالا و پایین انتقال یابد.

مراحل پیاده‌سازی

1. تشخیص جهت پیمایش: تعیین کنید که کاربر در جریان برنامه به «جلو» یا «عقب» حرکت می‌کند. نحوه تشخیص جهت به مورد استفاده شما بستگی دارد.
2. Trigger Transition with Types: جهت را در آرایه 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
  });
}