View Transitions API چیست؟

View Transitions API مجموعه‌ای از قابلیت‌های مدرن وب است که این کار را ساده‌تر می‌کند. مرورگر می‌تواند از وضعیت قبلی و جدید صفحه تصویر بگیرد و تغییر میان آن‌ها را با انیمیشن نمایش دهد. جالب‌تر اینکه این فناوری فقط برای برنامه‌های تک‌صفحه‌ای نیست. در مرورگرهای پشتیبان، می‌توان انتقال‌هایی میان دو صفحه مستقل یک وب‌سایت نیز ایجاد کرد؛ حتی با استفاده از CSS و بدون نوشتن JavaScript برای اجرای خود Transition. در این مقاله با View Transitions API، روش استفاده از آن در JavaScript و CSS، انیمیشن عناصر مشترک میان صفحات، محدودیت‌های آن و نکات مهم تجربه کاربری آشنا می‌شویم.

View Transitions API چیست؟

View Transitions API یک API مرورگر برای ایجاد انیمیشن میان دو وضعیت بصری صفحه وب است. به زبان ساده، مرورگر وضعیت قبلی را ثبت می‌کند، تغییر موردنظر را انجام می‌دهد، وضعیت جدید را ثبت می‌کند و سپس امکان متحرک‌سازی انتقال میان این دو وضعیت را فراهم می‌کند. برای مثال، تصور کنید یک صفحه شامل کارت‌های محصولات دارید. کاربر روی یکی از کارت‌ها کلیک می‌کند و جزئیات محصول نمایش داده می‌شود. به‌جای اینکه تمام محتوا ناگهان جایگزین شود، مرورگر می‌تواند بین وضعیت قبلی و جدید یک انتقال تصویری ایجاد کند. این انیمیشن می‌تواند یک محوشدن ساده باشد یا با تنظیم CSS به انتقالی اختصاصی برای تصویر، عنوان یا سایر عناصر تبدیل شود.

View Transitions چه مشکلی را حل می‌کند؟

در روش‌های سنتی، ساخت یک انتقال مناسب ممکن است به کارهای مختلفی نیاز داشته باشد:

• ذخیره وضعیت بصری قبلی صفحه
• نمایش وضعیت جدید
• هماهنگ کردن انیمیشن عناصر
• مدیریت ظاهر عناصر حذف‌شده یا اضافه‌شده
• جلوگیری از تداخل تعاملات کاربر با محتوای قدیمی و جدید

View Transitions بخش مهمی از این زیرساخت را به مرورگر می‌سپارد. مرورگر وضعیت قبلی و جدید را ثبت می‌کند و آن‌ها را در قالب عناصر ویژه‌ای در CSS قرار می‌دهد تا بتوان انیمیشن را کنترل کرد. در نتیجه، توسعه‌دهنده می‌تواند بیشتر روی طراحی انتقال تمرکز کند، به‌جای اینکه تمام سازوکار نمایش وضعیت قبلی و جدید را از ابتدا پیاده‌سازی کند.

دو نوع اصلی View Transition

به‌طور کلی، دو سناریوی مهم وجود دارد:

۱. Same-document View Transition

این روش برای زمانی است که سند HTML عوض نمی‌شود، اما محتوای صفحه یا وضعیت رابط کاربری تغییر می‌کند. برای مثال، در یک برنامه تک‌صفحه‌ای (SPA) ممکن است فهرست محصولات با جزئیات یک محصول جایگزین شود، بدون اینکه مرورگر سند جدیدی دریافت کند.

در این حالت معمولاً از متد document.startViewTransition() استفاده می‌کنیم.

۲. Cross-document View Transition

این روش برای انتقال میان دو سند HTML مستقل است؛ مثلاً وقتی کاربر از صفحه فهرست محصولات به صفحه جزئیات یک محصول می‌رود. در مرورگرهای پشتیبان، دو صفحه هم‌مبدأ می‌توانند با تنظیمات CSS مناسب در یک انتقال بصری شرکت کنند. برای این روش، نیازی نیست حتماً یک SPA داشته باشید. تفاوت مهم اینجاست: در روش اول، کد شما معمولاً تغییر DOM را مدیریت می‌کند؛ اما در روش دوم، ناوبری عادی مرورگر میان دو صفحه می‌تواند Transition را ایجاد کند.

ساخت اولین View Transition با JavaScript

بیایید ابتدا یک نمونه ساده بسازیم. فرض کنید یک بخش از صفحه داریم که با کلیک روی دکمه، عنوان آن تغییر می‌کند.

HTML:

<main id="content">
  <h2 id="title">فهرست محصولات</h2>
  <p>محصولات جدید را بررسی کنید.</p>
  <button id="change-view">مشاهده جزئیات</button>
</main>

حالا با JavaScript می‌توانیم تغییر عنوان را داخل یک View Transition انجام دهیم:

const button = document.querySelector("#change-view");
const title = document.querySelector("#title");

button.addEventListener("click", () => {
  const update = () => {
    title.textContent = "جزئیات محصول";
  };

  if (!document.startViewTransition) {
    update();
    return;
  }

  document.startViewTransition(update);
});

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

آیا View Transition خودش DOM را تغییر می‌دهد؟

خیر. View Transitions API به‌تنهایی منطق برنامه شما را اجرا نمی‌کند. این API فرآیند انتقال بصری را مدیریت می‌کند، اما شما همچنان باید مشخص کنید چه تغییری در صفحه انجام شود؛ مثلاً کدام محتوا جایگزین شود یا کدام بخش نمایش داده شود.

در مثال قبلی، تغییر واقعی عنوان به کمک این خط انجام می‌شود:

title.textContent = "جزئیات محصول";

متد document.startViewTransition() این تغییر را در یک فرآیند Transition قرار می‌دهد. این تفاوت مهمی است؛ زیرا API جایگزین منطق اصلی برنامه یا سیستم مسیریابی شما نیست.

انیمیشن سفارشی با CSS

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

View Transitions API عناصر ویژه‌ای ایجاد می‌کند که می‌توان آن‌ها را با Pseudo-elementهای زیر هدف گرفت:

• ::view-transition-old() برای نمایش تصویری از وضعیت قبلی
• ::view-transition-new() برای نمایش وضعیت جدید
• ::view-transition-group() برای کنترل گروه مربوط به انتقال

مثلاً برای تغییر مدت انیمیشن پیش‌فرض صفحه می‌توان نوشت:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
}

در اینجا root به انتقال پیش‌فرض کل صفحه اشاره دارد. زمان کوتاه و مناسب معمولاً برای یک انتقال ظریف کافی است. البته مدت بیشتر همیشه به معنی تجربه بهتر نیست. اگر انیمیشن بیش از حد طولانی باشد، ممکن است کاربر احساس کند سایت کند شده است.

view-transition-name چیست؟

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

در هر دو وضعیت می‌توان نام مشترکی برای عنصر تعریف کرد:

.product-image {
  view-transition-name: product-image;
}

وقتی مرورگر یک عنصر با این نام را در وضعیت قبلی و عنصر متناظر را در وضعیت جدید پیدا کند، می‌تواند آن‌ها را به‌عنوان دو وضعیت از یک عنصر مفهومی در Transition در نظر بگیرد. یک نکته مهم: نام‌های view-transition-name باید در هر وضعیت صفحه یکتا باشند. اگر چند عنصر هم‌زمان در یک وضعیت، نام یکسان و غیرمجاز داشته باشند، ممکن است Transition مربوط به آن‌ها اجرا نشود.

چرا انیمیشن تصویر محصول جذاب است؟

فرض کنید صفحه فهرست فروشگاه دارای تصویر کوچکی از یک محصول است. وقتی کاربر روی آن کلیک می‌کند، صفحه جزئیات باز می‌شود و تصویر محصول در اندازه بزرگ‌تری نمایش داده می‌شود. اگر برای تصویر کارت و تصویر صفحه جزئیات نام Transition مشترکی در نظر گرفته شود، مرورگر می‌تواند تغییر اندازه و موقعیت آن را متحرک کند.

این الگو برای موارد زیر کاربرد دارد:

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

مهم است که انیمیشن در خدمت درک بهتر ارتباط دو صفحه باشد. افکت‌های زیاد و بی‌هدف ممکن است باعث شلوغی رابط کاربری شوند.

View Transition بین دو صفحه مستقل، بدون JavaScript

یکی از جذاب‌ترین بخش‌های View Transitions API این است که در مرورگرهای پشتیبان می‌توان انتقال میان دو صفحه مستقل را با CSS فعال کرد.

فرض کنید دو صفحه دارید:

products.html
product-details.html

در هر دو صفحه، باید CSS زیر وجود داشته باشد:

@view-transition {
  navigation: auto;
}

این تنظیم به مرورگر اعلام می‌کند که سند می‌تواند در ناوبری‌های واجد شرایط، در Cross-document View Transition شرکت کند.

برای انتقال بین صفحات، باید شرایط لازم برقرار باشد؛ از جمله اینکه صفحات از یک Origin باشند و هر دو سند در انتقال شرکت کنند. این قابلیت در همه مرورگرها و تمام انواع ناوبری به‌طور یکسان پشتیبانی نمی‌شود.

نمونه انتقال بین دو صفحه

در صفحه فهرست محصولات، فرض کنید تصویر کارت را این‌طور تعریف کرده‌ایم:

<a href="/product-details.html">
  <img
    class="product-image"
    src="/images/product.jpg"
    alt="تصویر محصول"
  >
</a>

و در CSS همین صفحه:

@view-transition {
  navigation: auto;
}

.product-image {
  view-transition-name: product-image;
}

در صفحه جزئیات نیز برای تصویر اصلی محصول همین نام را تعریف می‌کنیم:

@view-transition {
  navigation: auto;
}

.product-image {
  view-transition-name: product-image;
}

در نتیجه، در مرورگر سازگار، ناوبری از فهرست به صفحه جزئیات می‌تواند با یک انتقال بصری انجام شود و تصویر مشترک به‌شکل نرم جابه‌جا شود. در این نمونه لازم نیست با JavaScript مسیر حرکت تصویر یا اندازه ابتدایی و نهایی آن را محاسبه کنیم. مرورگر از نام مشترک عنصر و دو وضعیت صفحه برای مدیریت Transition استفاده می‌کند.

آیا صفحه‌ها حتماً باید در یک دامنه باشند؟

برای Cross-document View Transition معمول، هر دو صفحه باید هم‌مبدأ باشند؛ یعنی Origin آن‌ها یکسان باشد. برای مثال، دو صفحه از یک دامنه و پروتکل می‌توانند در صورت پشتیبانی مرورگر در انتقال شرکت کنند. اما انتقال میان دو سایت کاملاً متفاوت را نباید با همین روش تضمین‌شده فرض کرد. همچنین وجود تغییر مسیر بین‌دامنه‌ای، نوع ناوبری و وضعیت پشتیبانی مرورگر می‌تواند بر اجرای Transition تأثیر بگذارد.

CSS چگونه وضعیت قبلی و جدید را متحرک می‌کند؟

در طول Transition، مرورگر Pseudo-elementهای ویژه‌ای برای نمایش وضعیت قبل و بعد ایجاد می‌کند. این عناصر در ساختاری قرار می‌گیرند که می‌توان آن را با CSS کنترل کرد.

به‌صورت ساده، ساختار مفهومی چنین است:

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

این ساختار برای درک مفهوم کافی است؛ در پیاده‌سازی واقعی، عناصر مربوط به نام‌های اختصاصی نیز می‌توانند در درخت Transition قرار بگیرند. مرورگر با استفاده از این ساختار، وضعیت قدیمی و جدید را هماهنگ می‌کند تا امکان اجرای افکت‌هایی مانند Cross-fade و تغییر اندازه یا موقعیت فراهم شود.

آیا View Transitions فقط برای محو شدن است؟

خیر. محوشدن متقابل یا Cross-fade فقط یک رفتار پیش‌فرض است.

با استفاده از CSS می‌توان ظاهر انتقال را تغییر داد؛ برای مثال:

• افزایش یا کاهش شفافیت
• تغییر مدت و زمان‌بندی انیمیشن
• جابه‌جایی عناصر
• تغییر اندازه عناصر مشترک
• تعریف Transitionهای متفاوت برای قسمت‌های مختلف صفحه

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

چطور Transition را برای بخش‌های مشخص کنترل کنیم؟

برای عنصرهای مختلف می‌توان نام‌های متفاوتی تعریف کرد.

برای مثال:

.product-image {
  view-transition-name: product-image;
}

.product-title {
  view-transition-name: product-title;
}

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

نام هر عنصر باید در هر وضعیت مربوطه یکتا باشد؛ اگر یک عنصر در وضعیت خاصی نباید به‌صورت مستقل در Transition شرکت کند، می‌توان از مقدار none استفاده کرد.

آیا می‌توان انیمیشن پیش‌فرض صفحه را غیرفعال کرد؟

بله. می‌توان برای Transition رفتار سفارشی تعریف کرد یا در سناریوهای برنامه‌نویسی از قابلیت‌های API برای مدیریت یا ردکردن انیمیشن استفاده کرد. در برنامه‌های SPA، برای مثال می‌توان در شرایطی که انیمیشن فایده‌ای ندارد، تغییر DOM را بدون Transition انجام داد.

نکته این است که View Transition باید به نیاز رابط کاربری پاسخ بدهد. اگر هر کلیک با یک افکت سنگین همراه شود، تجربه کاربر به‌جای بهتر شدن می‌تواند آزاردهنده شود.

رعایت تنظیمات کاهش حرکت کاربر

همه کاربران با انیمیشن‌های زیاد راحت نیستند. بعضی افراد در سیستم‌عامل خود گزینه کاهش حرکت (Reduce Motion) را فعال می‌کنند تا از حرکت‌های بصری غیرضروری جلوگیری شود.

می‌توان با Media Query مربوط به prefers-reduced-motion مدت انیمیشن‌های View Transition را کاهش داد.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms;
    animation-delay: 0s;
  }
}

این تنظیم نمونه‌ای از کاهش اثر انیمیشن‌هاست. در پروژه واقعی بهتر است تمام انیمیشن‌های مرتبط نیز بررسی شوند و مطمئن شوید انتقال کوتاه‌تر یا غیرفعال‌شده همچنان رفتار قابل‌فهمی دارد.

View Transitions چه تأثیری بر عملکرد سایت دارند؟

این فناوری می‌تواند پیاده‌سازی انیمیشن‌های میان وضعیت‌های صفحه را ساده‌تر کند، اما به معنی بهبود خودکار سرعت سایت نیست.

ثبت وضعیت بصری و اجرای انیمیشن نیز هزینه پردازشی دارد. اگر انیمیشن پیچیده باشد یا تعداد زیادی عنصر در آن شرکت کنند، ممکن است روی دستگاه‌های ضعیف‌تر اثر بگذارد.

برای حفظ تجربه مناسب بهتر است:

• مدت انیمیشن را متناسب با نوع تغییر انتخاب کنید.
• از انیمیشن دادن به عناصر غیرضروری خودداری کنید.
• Transitionهای پیچیده را روی دستگاه‌های واقعی آزمایش کنید.
• از مسدود شدن تعامل کاربر بیش از زمان لازم جلوگیری کنید.
• تنظیمات Reduce Motion را رعایت کنید.

آیا View Transitions جای SPA یا فریم‌ورک‌ها را می‌گیرد؟

خیر. View Transitions API یک ابزار برای مدیریت انتقال بصری است؛ نه یک سیستم مسیریابی، نه یک فریم‌ورک رابط کاربری و نه جایگزین مدیریت State برنامه. می‌توانید آن را در یک SPA، با فریم‌ورکی که از آن پشتیبانی می‌کند، یا در ناوبری میان صفحات مستقل به کار ببرید. تصمیم‌گیری درباره اینکه کدام صفحه نمایش داده شود و اطلاعات از کجا بارگذاری شوند، همچنان به معماری برنامه شما بستگی دارد. اگر سایت شما از قبل مسیریابی پیچیده یا کتابخانه انیمیشن دارد، بهتر است قبل از افزودن View Transitions بررسی کنید چه بخشی از مسئولیت‌ها را می‌توان به این API سپرد و آیا با ساختار فعلی سازگار است یا خیر.

پشتیبانی مرورگرها در سال ۲۰۲۶

وضعیت پشتیبانی به نوع Transition بستگی دارد. پشتیبانی از document.startViewTransition() برای انتقال‌های داخل یک سند با پشتیبانی از @view-transition برای ناوبری میان اسناد یکسان نیست. مستندات فعلی MDN، View Transition API و برخی قابلیت‌های اصلی آن را برای مرورگرهای جدیدتر در وضعیت مناسبی قرار می‌دهند؛ اما قابلیت CSS مربوط به @view-transition برای انتقال بین اسناد هنوز در همه مرورگرهای پرکاربرد در دسترس نیست. بنابراین هنگام پیاده‌سازی این فناوری، باید نوع Transition و مرورگرهای هدف را بررسی کنید.

برای انتقال‌های داخل یک سند، می‌توان وجود متد document.startViewTransition را بررسی کرد. اگر وجود نداشت، کافی است تغییر صفحه را به روش عادی انجام دهید. برای انتقال میان دو سند نیز بهتر است سایت در مرورگرهای فاقد پشتیبانی، همچنان به شکل عادی قابل استفاده باشد. انیمیشن یک بهبود بصری است و نباید برای دسترسی به محتوای اصلی الزامی باشد.

اشتباهات رایج هنگام استفاده از View Transitions API

۱. فراموش کردن پشتیبانی مرورگر

اگر بدون بررسی پشتیبانی از document.startViewTransition() استفاده کنید، ممکن است کد در مرورگرهای قدیمی دچار خطا شود. همیشه مسیر جایگزین داشته باشید.

۲. استفاده از نام یکسان برای عناصر متعدد

در هر وضعیت، نام‌های غیر از none باید برای عناصر شرکت‌کننده یکتا باشند. اختصاص نام تکراری در یک وضعیت می‌تواند باعث رد شدن Transition شود.

۳. تصور اینکه تغییر محتوای صفحه خودکار انجام می‌شود

این API انیمیشن را مدیریت می‌کند، اما منطق تغییر صفحه یا DOM را باید خود برنامه اجرا کند.

۴. فرض کردن پشتیبانی یکسان در SPA و MPA

روش انتقال در یک سند با انتقال میان دو سند مستقل متفاوت است. باید هر دو روش را جداگانه آزمایش کنید.

۵. نادیده گرفتن Reduce Motion

انیمیشن باید به بهبود تجربه کمک کند. در نظر گرفتن ترجیحات حرکتی کاربران، به‌ویژه برای یک سایت عمومی، بخشی از طراحی مسئولانه است.

چک‌لیست شروع یک پروژه با View Transitions

• مشخص کنید به انتقال داخل یک صفحه نیاز دارید یا بین دو صفحه مستقل.
• اگر از SPA استفاده می‌کنید، تغییر DOM را داخل document.startViewTransition() قرار دهید.
• برای عناصر مشترک از view-transition-name با نام‌های یکتا استفاده کنید.
• برای انتقال میان صفحات، تنظیمات CSS را در هر دو سند بررسی کنید.
• پشتیبانی مرورگرها را برای نوع انتقال موردنظر آزمایش کنید.
• برای مرورگرهای قدیمی، رفتار عادی صفحه را حفظ کنید.
• مدت انیمیشن و تنظیمات کاهش حرکت را بررسی کنید.
• تجربه نهایی را روی موبایل و رایانه آزمایش کنید.

منابع رسمی برای مطالعه بیشتر

• مستندات View Transition API در MDN
• راهنمای document.startViewTransition()
• مستندات @view-transition در CSS
• راهنمای View Transitions در Chrome for Developers

جمع‌بندی

View Transitions API ابزاری مدرن برای ایجاد انتقال بصری میان دو وضعیت صفحه است. این فناوری می‌تواند انیمیشن‌های ساده‌ای مانند محوشدن متقابل یا افکت‌های پیشرفته‌تری مانند حرکت تصویر محصول از یک کارت به صفحه جزئیات را امکان‌پذیر کند.

برای انتقال داخل یک سند، معمولاً از document.startViewTransition() استفاده می‌کنیم. برای انتقال میان دو صفحه مستقل نیز می‌توان با استفاده از @view-transition و تنظیمات CSS مناسب، در مرورگرهای پشتیبان ناوبری را متحرک کرد.

ویژگی view-transition-name به مرورگر کمک می‌کند عناصر مرتبط بین دو وضعیت را تشخیص دهد و آن‌ها را مستقل از بقیه صفحه متحرک کند. با این حال، View Transitions API نه جایگزین مسیریابی است و نه تضمین می‌کند سایت سریع‌تر شود. باید آن را متناسب با نیاز رابط کاربری، با رعایت سازگاری مرورگرها و ترجیحات حرکتی کاربران به کار برد. اگر قصد دارید تجربه کاربری سایت خود را مدرن‌تر کنید، View Transitions API یکی از قابلیت‌هایی است که ارزش یادگیری و آزمایش دارد؛ به‌خصوص برای فروشگاه‌ها، گالری تصاویر، سایت‌های محتوایی و برنامه‌هایی که جابه‌جایی بین حالت‌های مختلف در آن‌ها بخش مهمی از تجربه کاربر است.