رابط برنامه‌نویسی کاربردی View Transition به شما این امکان را می‌دهد که بین نماهای مختلف وب‌سایت خود، گذارهای بصری یکپارچه‌ای ایجاد کنید. این امر، صرف نظر از اینکه سایت شما به صورت یک برنامه چند صفحه‌ای (MPA) یا یک برنامه تک صفحه‌ای (SPA) ساخته شده باشد، تجربه کاربری بصری جذاب‌تری را برای کاربران در حین پیمایش سایت ایجاد می‌کند.
موقعیت‌های معمول که در آن‌ها از انتقال‌های نما استفاده می‌کنید عبارتند از:
- یک تصویر کوچک در صفحه فهرست محصولات که در صفحه جزئیات محصول به تصویر کامل محصول تبدیل می‌شود.
- یک نوار ناوبری ثابت که هنگام حرکت از یک صفحه به صفحه دیگر، در جای خود باقی می‌ماند.
- شبکه‌ای با آیتم‌هایی که هنگام فیلتر کردن، موقعیتشان تغییر می‌کند.
انتقال نماها به معماری یا چارچوب خاصی از برنامه وابسته نیست و می‌تواند نه تنها در یک سند واحد، بلکه بین دو سند مختلف نیز آغاز شود.
هر دو نوع گذار نما بر اساس بلوک‌ها و اصول ساختاری یکسانی بنا شده‌اند:
- مرورگر از حالت‌های قدیمی و جدید عکس می‌گیرد.
- DOM به‌روزرسانی می‌شود در حالی که رندر متوقف می‌شود.
- این انتقال‌ها توسط انیمیشن‌های CSS پشتیبانی می‌شوند.
تنها چیزی که بین هر دو نوع متفاوت است، نحوه تحریک آنهاست.
وقتی یک گذار نما روی یک سند واحد اجرا می‌شود، به آن گذار نمای سند یکسان می‌گویند. این معمولاً در برنامه‌های تک صفحه‌ای (SPA) اتفاق می‌افتد. گذارهای نمای سند یکسان از نسخه ۱۱۱ کروم در کروم پشتیبانی می‌شوند.
با فراخوانی 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 است که از انتقال‌های نمای سند یکسان برای متحرک‌سازی کارت‌ها هنگام اضافه یا حذف شدن کارت‌های جدید استفاده می‌کند.
برای کسب اطلاعات بیشتر در مورد انتقال نمای سند یکسان، به صفحه مستندات اختصاصی مراجعه کنید.
ساخت انتقال‌های نمای سند یکسان
وقتی یک انتقال نما بین دو سند مختلف رخ می‌دهد، به آن انتقال نمای بین سندی می‌گویند. این برای MPAها معمول است. انتقال نمای بین سندی در کروم ۱۲۶ و بالاتر پشتیبانی می‌شود.
انتقال نمای بین اسناد، در صورتی که هر دو صفحه انتخاب شده باشند، توسط یک ناوبری بین اسناد با منشأ یکسان آغاز می‌شود. به عبارت دیگر، هیچ API برای شروع انتقال نمای بین اسناد وجود ندارد. وقتی کاربر روی یک لینک کلیک می‌کند، کلیک، انتقال نما را آغاز می‌کند.
برای انتخاب، از قطعه کد CSS زیر استفاده کنید:
@view-transition {
navigation: auto;
}
مثال Stack Navigator زیر یک MPA است که از انتقال نمای بین سندی بین دو سند مختلف استفاده می‌کند. بسته به اینکه آیا شما به ناوبری عمیق‌تر می‌روید یا خیر، صفحات به پشته منتقل می‌شوند یا از آن خارج می‌شوند.
هر آنچه که باید در مورد انتقال بین سندها بدانید را بیاموزید.