چه چیز جدیدی در انتقال مشاهده وجود دارد؟ (به‌روزرسانی Google I/O 2024)

Bramus

منتشر شده: ۱۶ مه ۲۰۲۴

در کنفرانس Google I/O 2024 ، من گام بعدی برای انتقال نماها را اعلام کردم: انتقال نمای بین اسنادی برای برنامه‌های چند صفحه‌ای (MPA).

علاوه بر این، من برخی از پیشرفت‌ها را به اشتراک گذاشتم که به شما امکان می‌دهد به طور کلی راحت‌تر با انتقال نماها کار کنید.

• اشتراک‌گذاری سبک‌های انیمیشن بین شبه‌عنصرهای view transition با استفاده از view-transition-class .
• انتقال‌های انتخابی نما با انواع فعال.

این بهبودها هم برای انتقال نمای سند یکسان برای برنامه‌های تک صفحه‌ای (SPA) و هم برای انتقال نمای سند بین سندی برای MPA اعمال می‌شود.

انتقال نمای بین اسنادی برای MPAها

در کروم ۱۱۱، تیم کروم قابلیت انتقال نمای سند یکسان را برای برنامه‌های تک‌صفحه‌ای ارائه کرد، که یک ویژگی مورد استقبال جامعه‌ی طراحان وب قرار گرفت.

دیدن اینکه بسیاری از شما با انتقال نماها چه چیزهایی ساخته‌اید، فوق‌العاده است. از پیاده‌سازی‌های معمولی که «تصویر کوچک را به عکس بزرگ تبدیل می‌کنند» گرفته تا تجربیات غوطه‌وری بسیار سفارشی مانند این مورد از Airbnb. فوق‌العاده است!

با این حال، پیاده‌سازی اولیه مستلزم ساخت یک SPA برای استفاده از انتقال‌های نما بود. از کروم ۱۲۶ به بعد، دیگر این‌طور نیست و انتقال‌های نما اکنون به‌طور پیش‌فرض برای ناوبری‌های با منشأ یکسان فعال هستند. اکنون می‌توانید یک انتقال نما بین دو سند مختلف که منشأ یکسانی دارند، ایجاد کنید.

برای فعال کردن انتقال بین دو سند، هر دو انتها باید این قابلیت را فعال کنند. برای انجام این کار، از @view-transition at-rule‎ استفاده کنید و توصیفگر navigation را روی auto تنظیم کنید.

@view-transition {
  navigation: auto;
}

انتقال‌های نمای بین سندی از همان بلوک‌های سازنده و اصول انتقال‌های نمای یک سندی استفاده می‌کنند. عناصری که view-transition-name روی آنها اعمال شده باشد، ضبط می‌شوند و می‌توانید انیمیشن‌ها را با استفاده از انیمیشن‌های CSS سفارشی کنید.

برای سفارشی‌سازی انتقال‌های نمای بین سندی ، از رویدادهای pageswap و pagereveal استفاده کنید که به شما امکان دسترسی به شیء انتقال نما را می‌دهند.

• با استفاده از pageswap می‌توانید درست قبل از گرفتن اسنپ‌شات‌های قدیمی، تغییرات لحظه آخری را روی صفحه خروجی اعمال کنید.
• با pagereveal می‌توانید صفحه جدید را قبل از شروع رندر شدن، پس از مقداردهی اولیه، سفارشی‌سازی کنید.

در هر دو رویداد، شما به یک شیء NavigationActivation دسترسی دارید تا بتوانید گذار نمای بین سندی را بر اساس ورودی‌های تاریخچه مقصد قدیمی و جدید یا نوع ناوبری، سفارشی‌سازی کنید .

برای تکمیل این موارد، می‌توانید با مسدود کردن رندر منتظر بارگذاری محتوا بمانید و برای بهبود زمان بارگذاری قبل از اجرای گذار نما، به پیش‌رندرینگ تکیه کنید .

نسخه آزمایشی

این نسخه آزمایشی Stack Navigator همه این ویژگی‌ها را (به همراه برخی بهبودها ) ترکیب می‌کند.

این یک 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، اصلاحاتی را نیز برای کار با انتقال‌های نمای کلی ارائه می‌دهد.

این بهبودها هم برای انتقال نمای سند یکسان برای SPA و هم برای انتقال نمای سند بین سندی برای MPA اعمال می‌شود.

سبک‌های انیمیشن را با view-transition-class به اشتراک بگذارید

تاکنون، هنگام متحرک‌سازی چندین اسنپ‌شات به یک روش، لازم بود که هر اسنپ‌شات را به صورت جداگانه هدف قرار دهید و برای هر عنصری که دارای یک 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 برای اعمال زمان‌بندی انیمیشن یکسان به چندین snapshot با استفاده از یک انتخابگر استفاده می‌کند.

برای کسب اطلاعات بیشتر در مورد 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 که به ریشه گذار نما اعمال می‌شوند، به این نوع‌ها در 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] شروع کنید.

اگر با اشکالی مواجه شدید، به جای آن ، یک اشکال کرومیوم ثبت کنید .