انتقال برای برنامه های تک صفحه ای را مشاهده کنید

یک الگوی رایج برای صفحات وب، استفاده از جاوا اسکریپت برای جایگزینی پویا محتوای یک صفحه، بدون بارگیری یک سند جدید و کامل HTML است. به این اپلیکیشن یک صفحه یا SPA می گویند. مشاهده انتقال راهی برای نشان دادن تداوم یا زمینه بین صفحات در SPA به شما می دهد.

انتقال کامل صفحه

هنگامی که کاربر شما به یک نمای جدید در SPA شما می رود، چارچوب شما DOM را با محتوای جدید جایگزین می کند. این باعث می شود محتوا فقط ظاهر شود، اما اگر بخواهید بین محتوای فعلی و محتوای جدید انتقال ایجاد کنید، چه؟

انتقال ها اغلب هر دو نمای قدیمی و جدید را به طور همزمان نشان می دهند، برای مثال محو شدن نمای قدیمی در حالی که در نمای جدید محو می شوند. از آنجا که محتوای موجود جایگزین شده است، این یک چالش قبل از انتقال مشاهده بود.

برای استفاده از انتقال‌های view، باید منطق تغییر DOM را در یک callback بپیچید. برای این مثال‌ها، ما یک پیاده‌سازی روتر اساسی داریم که توسط یک مؤلفه وب به نام MyRouter ارائه شده است. نحوه فعال کردن انتقال نمایش به روتر و چارچوبی که استفاده می کنید بستگی دارد.

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

این انتقال پیش‌فرض را فعال می‌کند، که نمای قدیمی را در حالی که در نمای جدید محو می‌شود، محو می‌کند.

اینجا چه خبر است؟ وقتی document.startViewTransition() را فراخوانی می کنید، مرورگر یک عکس فوری از نمای قدیمی می گیرد. سپس تابع callback را که ارسال می کنید فراخوانی می کند، که DOM را به نمای جدید به روز می کند (اما هنوز آن را نشان نمی دهد). وقتی عملکرد برگشت به تماس کامل شد، مرورگر انتقال به محتوای جدید را آغاز می کند.

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

سفارشی کردن انتقال

همانطور که در مثال قبلی دیدید، نمای پیش‌فرض Transition نمای قدیمی را محو می‌کند در حالی که در نمای جدید محو می‌شود. شما می‌توانید انتقال را برای مطابقت بهتر با سبک سایت خود با سبک دادن به عناصر شبه تولید شده توسط انتقال مشاهده سفارشی کنید.

می توانید انتقال خروج را با ::view-transition-old() و انتقال ورودی را با ::view-transition-new() مشخص کنید. همچنین می توانید مقادیر هر دو را با ::view-transition-group() مشخص کنید.

در این مثال، نمای قدیمی با استفاده از انتقال slide-out-to-left و نمای جدید با استفاده از انتقال slide-in-from-right تغییر می‌کند. هر دوی آنها مدت زمان 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 کار کند، برای هر view-transition-name ، باید دقیقاً یک عنصر قبل از فراخوانی document.startViewTransition() و دقیقاً یک عنصر پس از اتمام callback در document.startViewTransition() وجود داشته باشد.

در این مثال، یک پخش کننده موسیقی وجود دارد که هنر آلبوم، عنوان و هنرمند را نشان می دهد. یک نمای جایگزین، همان محتوا را با تنظیم مجدد، با افزودن متن آهنگ نشان می دهد.

در مثال قبل، دقیقاً یکی از هر یک از عناصر انتقال یافته در نمای قدیم و جدید وجود دارد و حتی انتخابگرهای یکسانی دارند. به نظر می رسد عناصر انتقال یافته بین اندازه و موقعیت خود حرکت می کنند. قسمت‌های غیر انتقالی نما به داخل و خارج محو می‌شوند.

به یک مثال درگیرتر نگاه کنید. به عنوان مثال، صفحه اصلی یک وبلاگ ممکن است یک عنوان و تصویر برای هر پست نشان دهد، و اینها در نمای کامل یک پست وبلاگ نیز وجود دارند. هنگام پیمایش از صفحه اصلی به یک پست خاص، ممکن است بخواهید آن را طوری جلوه دهید که گویی عنوان و تصویر برای ارائه زمینه به مکان جدید خود منتقل می شوند.

برای انجام این کار برای عنوان، باید یک view-transition-name روی عنصر عنوان داشته باشید که در نمای قدیمی منحصر به فرد است، با عنصر عنوان در نمای جدید به اشتراک گذاشته شده و در نمای جدید منحصر به فرد است. این یک چالش است، زیرا صفحه اصلی دارای چندین عنوان و تصویر است و شما نمی دانید که کاربر روی کدام یک کلیک خواهد کرد.

شما دو گزینه برای حل این مشکل دارید. شما می توانید انتخاب کنید که یک view-transition-name منحصر به فرد برای هر پست در صفحه اصلی اضافه کنید و سپس آن نام را در هر پست صفحه کامل مطابقت دهید. شما می توانید اینها را با استفاده از شناسه پست ایجاد کنید. گزینه دیگر شما این است که از یک view-transition-name عمومی استفاده کنید، اما آن را فقط پس از کلیک کاربر روی یک پست، اما قبل از فراخوانی document.startViewTransition() اعمال کنید.

طراحی انتقال

انتقال‌های مشاهده مجموعه‌ای از ابزارها هستند که می‌توانید برای راهنمایی کاربران خود و ارائه نکات اضافی درباره برند یا زمینه استفاده کنید. احتمالاً از چندین تکنیک برای یافتن انتقال‌هایی که برای سایت شما کار می‌کنند استفاده خواهید کرد.

بسته به جلوه ای که به دنبال آن هستید، ممکن است لازم باشد عناصر یا انیمیشن ها را نیز تغییر دهید. در مثال قبلی، چندین سبک برای به دست آوردن انتقال صاف تنظیم شدند.

تیتر دارای width: fit-content ، که وقتی متنی را انتقال می‌دهید که بسته نمی‌شود (یا در نمای قدیم و جدید بسته بندی یکسانی دارد. سبک مفیدی است. در غیر این صورت، انتقال ممکن است بین عناصری با عرض‌های مختلف باشد که باعث می‌شود انتقال هموارتر نشود.

تصویر همچنین نسبت ابعاد متفاوتی در نمای قدیمی و نمای جدید دارد. مثال انیمیشن و ویژگی شی object-fit را تغییر می دهد تا انتقال صاف به نظر برسد.

احترام گذاشتن prefers-reduced-motion

یکی از دلایل رایج درخواست کاربران برای کاهش حرکت این است که انیمیشن های تمام صفحه، مانند آنهایی که می توان با انتقال دید به دست آورد، می تواند باعث ناراحتی افراد مبتلا به اختلالات حرکت دهلیزی شود. می‌توانید انیمیشن‌ها را با استفاده از عبارت prefers-reduced-motion Media Query غیرفعال کنید. همچنین می‌توانید انیمیشن‌های جایگزینی ارائه دهید که ظریف‌تر هستند، اما همچنان نحوه اتصال عناصر را نشان می‌دهند.

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

درک خود را بررسی کنید