در Google I/O 2024 ، مرحله بعدی را برای انتقال مشاهده اعلام کردم: انتقال نمای متقابل اسناد برای برنامه‌های چند صفحه‌ای (MPA).
علاوه بر این، من برخی از پیشرفت‌ها را به اشتراک گذاشتم که به شما امکان می‌دهد راحت‌تر با انتقال‌های view به طور کلی کار کنید.
- به اشتراک گذاری سبک های انیمیشن بین عناصر شبه انتقال view با
view-transition-class. - انتقال نمایش انتخابی با انواع فعال.
این بهبودها هم برای انتقال نمای سند یکسان برای برنامه های کاربردی تک صفحه ای (SPA) و هم برای انتقال دید بین اسناد برای MPA اعمال می شود.
انتقال نمای متقابل برای MPAها
در Chrome 111، تیم کروم انتقال‌های نمای سند یکسان را برای برنامه‌های کاربردی تک صفحه‌ای ارسال کرد که این ویژگی در جامعه وب‌سازی به خوبی مورد استقبال قرار گرفت.
دیدن آنچه که بسیاری از شما با انتقال view ساخته اید بسیار عالی است. از پیاده‌سازی‌های معمولی که «تصویر کوچک را به عکس بزرگ تبدیل می‌کند» تا تجربه‌های فراگیر بسیار سفارشی‌شده مانند این مورد از Airbnb. حیرت آور!
با این حال، پیاده‌سازی اولیه شما را ملزم به ساخت یک SPA برای استفاده از انتقال‌های view داشت. از Chrome 126 دیگر این مورد وجود ندارد، انتقال view اکنون به طور پیش‌فرض برای پیمایش‌های همان مبدأ فعال است. اکنون می‌توانید بین دو سند مختلف که با منشأ یکسان هستند، یک تغییر نمای ایجاد کنید.
برای فعال کردن انتقال نمای متقابل اسناد، هر دو طرف باید شرکت کنند. برای انجام این کار، از @view-transition at-rule استفاده کنید و توصیفگر navigation را روی auto تنظیم کنید.
@view-transition {
navigation: auto;
}
انتقال‌های نمای متقاطع از همان بلوک‌های ساختمانی و اصولی استفاده می‌کنند که انتقال‌های نمای سندی یکسان هستند. عناصر با view-transition-name اعمال می‌شوند و می‌توانید انیمیشن‌ها را با استفاده از انیمیشن‌های CSS سفارشی کنید.
برای سفارشی‌سازی انتقال‌های نمای متقابل اسناد ، از رویدادهای pageswap و pagereveal استفاده کنید ، که به شما امکان دسترسی به شی انتقال view را می‌دهد.
- با استفاده
pageswapمی توانید برخی تغییرات لحظه آخری را در صفحه خروجی درست قبل از گرفتن عکس های فوری قدیمی انجام دهید. - با
pagerevealمی توانید صفحه جدید را قبل از شروع رندر پس از مقداردهی اولیه، شخصی سازی کنید.
در هر دو رویداد شما به یک شی NavigationActivation دسترسی دارید تا یک انتقال نمای متقابل اسناد را بر اساس ورودی های تاریخچه مقصد قدیمی و جدید یا نوع پیمایش سفارشی کنید .
برای تکمیل آن، می‌توانید منتظر بمانید تا محتوا با مسدود کردن رندر بارگیری شود و برای بهبود زمان بارگیری قبل از اجرای انتقال مشاهده ، به اجرای پیش‌اجرای تکیه کنید .
نسخه ی نمایشی
این نسخه ی نمایشی Stack Navigator همه این ویژگی ها را (به همراه برخی بهبودها ) ترکیب می کند.
pagereveal بر اساس اطلاعات فعال‌سازی ناوبری سفارشی شده‌اند. از پیش اجرا نیز استفاده می شود. این یک MPA با ناوبری اسناد متقابل است که در همان مبدا میزبانی می شود. با استفاده از pagereveal ، نوع انیمیشن بر اساس ورودی های تاریخ مقصد قدیمی و جدید تعیین می شود.
window.addEventListener("pagereveal", async (e) => {
if (e.viewTransition) {
// Determine animation type based on the old/new history entries
const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
document.documentElement.dataset.transition = transitionClass;
// Cleanup after transition ran
await e.viewTransition.finished;
delete document.documentElement.dataset.transition;
}
});
مستندات را بخوانید
برای اطلاعات بیشتر در مورد نحوه فعال‌سازی و سفارشی کردن انتقال‌های نمای متقاطع، به مستندات انتقال نمای بین اسناد ما مراجعه کنید.
مشاهده پیشرفت های انتقال
علاوه بر ارسال انتقال‌های نمای متقابل اسناد برای MPA، Chrome همچنین برخی اصلاحات را برای کار با انتقال دید به طور کلی شامل می‌شود.
این پیشرفت‌ها برای هر دو انتقال نمای سند برای SPA و انتقال نمای متقابل برای MPA اعمال می‌شود.
سبک های انیمیشن را با view-transition-class به اشتراک بگذارید
پشتیبانی مرورگر
- 125
- 125
- ایکس
- ایکس
تا به حال، هنگام متحرک سازی چندین عکس فوری به یک روش، باید با تکرار شبه انتخابگر آن برای هر عنصری که یک view-transition-name منحصر به فرد دارد، هر عکس فوری را به صورت جداگانه هدف قرار دهید.
با view-transition-class اکنون می توانید یک نام مشترک به همه عکس های فوری اضافه کنید. از این نام مشترک در انتخابگرهای شبه برای هدف قرار دادن تمام عکس های فوری که مطابقت دارند استفاده کنید. این منجر به انتخابگرهای بسیار ساده‌تر می‌شود که به طور خودکار از یک به چندین عنصر مقیاس می‌شوند.
#cards-wrapper > div {
view-transition-class: card;
}
html::view-transition-group(.card) {
animation-timing-function: var(--bounce);
}
مثال کارت زیر از view-transition-class استفاده می کند تا زمان بندی انیمیشن مشابهی را با استفاده از یک انتخابگر برای بسیاری از عکس های فوری اعمال کند.
view-transition-class ، animation-timing-function برای همه کارت ها به جز کارت های اضافه یا حذف شده اعمال می کند. برای کسب اطلاعات بیشتر در مورد view-transition-class ، مستندات اختصاصی در view-transition-class را بخوانید .
انتقال نمایش انتخابی با انواع فعال
یکی دیگر از اصلاحات برای مشاهده انتقال ها، معرفی انواع اضافه کردن به یک انتقال دید هنگام گرفتن و انجام آن است. این کار با انتقال‌های نمای مختلف در یک صفحه را آسان‌تر می‌کند، بدون اینکه اعلان‌های یکی دیگری را تغییر دهد.
به عنوان مثال، هنگام رفتن به صفحه بعدی یا قبلی در یک دنباله صفحه بندی ، ممکن است بخواهید از انیمیشن های مختلف بسته به اینکه به صفحه بالاتر یا صفحه پایین تر از دنباله می روید استفاده کنید.
قبل از انواع فعال، می‌توانید کلاس‌هایی را به DOM اضافه کنید و به آن کلاس‌ها در CSS خود پاسخ دهید. با این حال، شما همچنین باید پس از تکمیل انتقال، پاکسازی کنید.
با انواع انتقال مشاهده می‌توانید به همان نتیجه برسید، با مزیت افزوده این نوع به‌طور خودکار پس از اتمام انتقال مشاهده، پاک می‌شوند. انواع فقط هنگام گرفتن یا انجام انتقال اعمال می شوند.
برای انتقال‌های نمای یکسان، types به متد startViewTransition منتقل کنید که اکنون یک شی را می‌پذیرد. update تابع فراخوانی است که DOM را به روز می کند و types دنباله ای از رشته ها هستند.
const direction = determineBackwardsOrForwards();
const t = document.startViewTransition({
update: updateTheDOMSomehow,
types: ['slide', direction],
}););
برای انتقال نمای متقاطع، انواع را در @view-transition at-rule با استفاده از توصیفگر types تنظیم کنید یا آنها را در رویدادهای pageswap و pagereveal در پرواز تنظیم کنید.
@view-transition {
navigation: auto;
types: slide, forwards;
}
با مجموعه انواع، می توانید با استفاده از انتخابگرهای شبه کلاس :active-view-transition-type() و :active-view-transition که برای root transition view اعمال می شوند، به این انواع در CSS خود پاسخ دهید.
/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
&::view-transition-old(content) {
animation-name: slide-out-to-left;
}
&::view-transition-new(content) {
animation-name: slide-in-from-right;
}
}
برای کسب اطلاعات بیشتر در مورد انواع انتقال نمای، به اسناد اختصاصی برای انتقال نمای سند مشابه و انتقال نمای متقاطع اسناد مراجعه کنید.
بازخورد
بازخورد توسعه دهندگان همیشه قدردانی می شود. برای انجام این کار، یک مشکل را با پیشنهادات و سوالات با گروه کاری CSS در GitHub ثبت کنید . پیشوند مشکل خود را با [css-view-transitions] وارد کنید.
اگر با یک باگ مواجه شدید، به جای آن یک باگ Chromium را ثبت کنید .