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

Jake Archibald

Bramus

منتشر شده: ۱۷ آگوست ۲۰۲۱، آخرین به‌روزرسانی: ۲۵ سپتامبر ۲۰۲۴

وقتی یک گذار نما روی یک سند واحد اجرا می‌شود، به آن گذار نمای سند یکسان می‌گویند. این معمولاً در برنامه‌های تک صفحه‌ای (SPA) که در آن‌ها از جاوا اسکریپت برای به‌روزرسانی DOM استفاده می‌شود، صادق است. گذارهای نمای سند یکسان در کروم از نسخه ۱۱۱ پشتیبانی می‌شوند.

برای شروع گذار نمای سند مشابه، 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());
}

هنگام فراخوانی، مرورگر به طور خودکار از تمام عناصری که ویژگی CSS مربوط به view-transition-name روی آنها تعریف شده است، snapshot می‌گیرد.

سپس تابع فراخوانی ارسالی را اجرا می‌کند که DOM را به‌روزرسانی می‌کند و پس از آن از حالت جدید عکس می‌گیرد.

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

گذار پیش‌فرض: محو شدن متقاطع

گذار پیش‌فرض نما، محوشدگی متقاطع است، بنابراین به عنوان مقدمه‌ای خوب برای API عمل می‌کند:

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

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

جایی که updateTheDOMSomehow نحوی DOM را به حالت جدید تغییر می‌دهد. این کار را می‌توان به هر روشی که می‌خواهید انجام دهید. برای مثال، می‌توانید عناصر را اضافه یا حذف کنید، نام کلاس‌ها را تغییر دهید یا سبک‌ها را تغییر دهید.

و درست مثل همین، صفحات به صورت متقاطع محو می‌شوند:

خب، یک کراس فید خیلی هم چشمگیر نیست. خوشبختانه، می‌توان ترنزیشن‌ها را سفارشی کرد، اما اول باید بفهمید که این کراس فید ساده چگونه کار می‌کند.

نحوه عملکرد این انتقال‌ها

بیایید نمونه کد قبلی را به‌روزرسانی کنیم.

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

وقتی .startViewTransition() ‎ فراخوانی می‌شود، API وضعیت فعلی صفحه را ثبت می‌کند. این شامل گرفتن یک snapshot نیز می‌شود.

پس از تکمیل، تابع فراخوانی (callback) ارسال شده به .startViewTransition() فراخوانی می‌شود. در اینجا DOM تغییر می‌کند. سپس، API وضعیت جدید صفحه را ثبت می‌کند.

پس از دریافت حالت جدید، API یک درخت شبه عنصر مانند این می‌سازد:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

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

::view-transition-old(root) یک اسکرین‌شات از نمای قدیمی است و ::view-transition-new(root) یک نمایش زنده از نمای جدید است. هر دو به صورت «محتوای جایگزین‌شده» CSS (مانند یک <img> ) رندر می‌شوند.

نمای قدیمی از opacity: 1 تا opacity: 0 متحرک می‌شود، در حالی که نمای جدید از opacity: 0 تا opacity: 1 متحرک می‌شود و یک محوشدگی متقاطع ایجاد می‌کند.

تمام انیمیشن‌ها با استفاده از انیمیشن‌های CSS انجام می‌شوند، بنابراین می‌توان آن‌ها را با CSS سفارشی‌سازی کرد.

سفارشی‌سازی انتقال

تمام شبه عناصر انتقال نما را می‌توان با CSS هدف‌گیری کرد، و از آنجایی که انیمیشن‌ها با استفاده از CSS تعریف می‌شوند، می‌توانید آنها را با استفاده از ویژگی‌های انیمیشن CSS موجود تغییر دهید. برای مثال:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}

با همین یک تغییر، محو شدن حالا خیلی کند شده است:

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

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }