View Transition API در سایت‌های چندصفحه‌ای؛ راهنمای ۷ مرحله‌ای

View Transition API برای هماهنگ‌کردن تغییر دیداری بین دو وضعیت صفحه ساخته شده و در سایت‌های چندصفحه‌ای کمک می‌کند پیمایش بین اسناد هم‌مبدأ نرم‌تر شود؛ بدون نیاز به تبدیل پروژه به SPA.

مقدمه

کاربر هنگام کلیک روی لینک‌های یک سایت چندصفحه‌ای، معمولاً با پرشی ناگهانی از صفحهٔ قدیمی به صفحهٔ جدید روبه‌رو می‌شود. View Transition API راهی استاندارد برای نرم‌تر کردن همین جابه‌جایی است؛ بدون آن‌که لازم باشد پروژهٔ سنتی را به یک برنامهٔ تک‌صفحه‌ای یا SPA تبدیل کنیم.

View Transition API چیست و چه مسئله‌ای را حل می‌کند؟

View Transition API برای هماهنگ‌کردن تغییر دیداری بین دو وضعیت صفحه طراحی شده است. در یک SPA، تغییر DOM از طریق document.startViewTransition() آغاز می‌شود؛ اما در یک سایت چندصفحه‌ای، مرورگر می‌تواند هنگام پیمایش هم‌مبدأ بین دو سند، تصویر وضعیت قدیمی و جدید را به شکل کنترل‌شده به هم متصل کند. نتیجه، انتقالی کوتاه و قابل‌درک‌تر است؛ درحالی‌که ساختار لینک‌ها، رندر سمت سرور و سادگی معماری سایت حفظ می‌شود.

راهنمای رسمی MDN توضیح می‌دهد که در حالت چندصفحه‌ای، سند مبدأ و مقصد باید هم‌مبدأ باشند و هر دو سند باید با دستور @view-transition { navigation: auto; } در CSS، قابلیت را فعال کنند. View Transition API جایگزین معماری سایت نیست؛ بلکه یک لایهٔ تجربهٔ کاربری روی پیمایش استاندارد است.

گام اول: دامنهٔ استفاده را مشخص کنید

ابتدا تعیین کنید کدام لینک‌ها ارزش انتقال دارند. صفحه‌های اصلی، مقاله‌ها و مسیرهای نزدیک در یک دامنه معمولاً گزینه‌های خوبی هستند. اگر لینک به دامنه‌ای دیگر می‌رود، این قابلیت را برای آن مسیر فعال فرض نکنید؛ محدودیت هم‌مبدأ در پیاده‌سازی چندصفحه‌ای اهمیت دارد.

گام دوم: فعال‌سازی پایه در هر دو سند

در CSS صفحهٔ فعلی و صفحهٔ مقصد، این قطعه را قرار دهید:

“`css @view-transition { navigation: auto; } “`

برای رفت‌وبرگشت کامل، هر دو سمت باید opt-in باشند. اگر فقط یک صفحه این قاعده را داشته باشد، تجربه در همهٔ مسیرها یکدست نخواهد بود.

گام سوم: عناصر مهم را نام‌گذاری کنید

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

گام چهارم: انیمیشن را با CSS کنترل کنید

مرورگر به‌صورت پیش‌فرض یک cross-fade ایجاد می‌کند. برای کنترل آن می‌توان pseudo-elementهای ::view-transition-old() و ::view-transition-new() یا گروه transition را هدف گرفت:

“`css ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; } “`

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

گام پنجم: fallback و دسترسی‌پذیری را جدی بگیرید

پشتیبانی مرورگر را قطعی فرض نکنید. در مسیرهای JavaScript، ابتدا وجود document.startViewTransition را بررسی کنید و در نبود آن، همان به‌روزرسانی عادی DOM یا پیمایش استاندارد را اجرا کنید. همچنین برای کاربرانی که حرکت کمتر می‌خواهند، prefers-reduced-motion را در نظر بگیرید و مدت یا شدت انیمیشن را کاهش دهید. محتوای صفحه باید بدون transition هم کامل، قابل‌خواندن و قابل‌استفاده باشد.

گام ششم: وضعیت واقعی صفحه را پایدار نگه دارید

عنوان‌ها، تصویرها و اجزایی را که بین صفحه‌ها منتقل می‌شوند، با ساختار قابل‌پیش‌بینی رندر کنید. نام‌گذاری پویا، تغییر ناگهانی ابعاد یا چند عنصر هم‌نام می‌تواند transition را ناپایدار کند. در حالت‌های پیشرفته‌تر، رویدادهای pageswap و pagereveal امکان واکنش به زمان خروج و ورود سند را فراهم می‌کنند؛ اما بهتر است ابتدا نسخهٔ پایه و قابل‌اعتماد را تحویل دهید.

گام هفتم: قبل از انتشار آزمایش کنید

مسیرهای رفت و برگشت، موبایل، سرعت شبکه، صفحه‌های دارای تصویر دیر بارگذاری‌شونده و حالت reduced motion را بررسی کنید. مطمئن شوید focus صفحه، عنوان سند، دکمهٔ بازگشت و محتوای اصلی در هر دو حالت عادی و transition درست کار می‌کنند. تست در چند مرورگر مهم است، چون قابلیت‌های View Transition API ممکن است با سرعت یکسان در همهٔ موتورهای مرورگر ارائه نشوند.

جمع‌بندی

View Transition API برای سایت‌های چندصفحه‌ای یک ارتقای تدریجی و کم‌ریسک است: با چند خط CSS می‌توان یک انتقال پایه ساخت، سپس با view-transition-name و pseudo-elementهای CSS فقط بخش‌های مهم را شخصی‌سازی کرد. شرط موفقیت، حفظ fallback، رعایت هم‌مبدأ بودن مسیرها، توجه به reduced motion و آزمایش واقعی است. برای جزئیات چرخهٔ transition، نمونه‌های MPA و ساختار pseudo-elementها، راهنمای رسمی MDN دربارهٔ استفاده از View Transition API مرجع اصلی این آموزش است.

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