انتقال صاف با View Transition API

براموس

View Transition API به شما این قدرت را می دهد که بین نماهای مختلف وب سایت خود، انتقال تصویری یکپارچه ایجاد کنید. این یک تجربه کاربری جذاب تری را برای کاربران در حین حرکت در سایت شما ایجاد می کند، صرف نظر از اینکه به عنوان یک برنامه چند صفحه ای (MPA) یا یک برنامه تک صفحه ای (SPA) ساخته شده است.

موقعیت‌های معمولی که در آن از انتقال view استفاده می‌کنید عبارتند از:

  • یک تصویر کوچک در صفحه فهرست محصول که به یک تصویر محصول در اندازه کامل در صفحه جزئیات محصول تبدیل می‌شود.
  • یک نوار پیمایش ثابت که هنگام حرکت از صفحه ای به صفحه دیگر در جای خود باقی می ماند.
  • شبکه ای با مواردی که در حال حرکت در موقعیت های شما هستند.
انتقال ایجاد شده با View Transition API. سایت دمو را امتحان کنید . به Chrome 111 یا بالاتر نیاز دارد.

پیاده سازی انتقال نمایش

انتقال‌های View به معماری یا چارچوب برنامه خاصی وابسته نیستند و می‌توانند نه تنها در یک سند واحد و همچنین بین دو سند مختلف فعال شوند.

هر دو نوع انتقال دید بر اساس بلوک‌های ساختمانی و اصول یکسانی متکی هستند:

  1. مرورگر از حالت های قدیمی و جدید عکس های فوری می گیرد.
  2. در حالی که رندر متوقف می شود، DOM به روز می شود.
  3. انتقال ها توسط انیمیشن های CSS طراحی شده اند.

تنها چیزی که بین هر دو نوع متفاوت است این است که چگونه آنها را تحریک می کنید.

انتقال نمای همان سند

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

پشتیبانی مرورگر

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: 18.

منبع

نحوه تحریک

با فراخوانی 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());
}

مثال

نمونه کارت‌های زیر یک SPA است که از انتقال‌های نمای سند یکسان برای متحرک کردن کارت‌ها هنگام اضافه یا حذف کارت‌های جدید استفاده می‌کند.

ضبط دمو کارت . به Chrome 111 یا بالاتر نیاز دارد.

شروع به ساختن کنید

به صفحه مستندات اختصاصی مراجعه کنید تا همه چیزهایی را که در مورد انتقال نمای سند یکسان بدانید، بدانید.

ایجاد انتقال نمای سند یکسان

انتقال نمای متقابل اسناد

هنگامی که یک انتقال دید بین دو سند مختلف اتفاق می افتد، به آن انتقال نمای متقاطع می گویند. این برای MPA ها معمول است. انتقال نمای بین اسناد در Chrome 126 و بالاتر پشتیبانی می شود.

پشتیبانی مرورگر

  • کروم: 126.
  • لبه: 126.
  • فایرفاکس: پشتیبانی نمی شود.
  • پیش نمایش فناوری سافاری: پشتیبانی می شود.

نحوه تحریک

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

برای انتخاب، از قطعه CSS زیر استفاده کنید:

@view-transition {
  navigation: auto;
}

مثال

مثال زیر Stack Navigator یک MPA است که از انتقال بین دو سند مختلف استفاده می‌کند. بسته به این که آیا در پیمایش عمیق تر می روید یا نه، صفحات به پشته فشار داده می شوند یا از بین می روند.

ضبط نسخه ی نمایشی Stack Navigator . به Chrome 126 یا بالاتر نیاز دارد.

شروع به ساختن کنید

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

ایجاد انتقال نمای بین اسناد