موارد جدید در انتقال مشاهده (به روز رسانی 2025)

Bramus

منتشر شده: ۸ اکتبر ۲۰۲۵

از زمانی که ما انتقال‌های نمای سند یکسان را در سال ۲۰۲۳ ارائه دادیم، خیلی چیزها تغییر کرده است.

در سال ۲۰۲۴، ما انتقال‌های نمای بین سندی (cross-document view transitions) را ارائه کردیم، اصلاحاتی مانند view-transition-class و انواع انتقال نما (view transition types ) را اضافه کردیم و همچنین از سافاری برای افزودن پشتیبانی از انتقال‌های نما استقبال کردیم.

این پست به شما مروری کلی از آنچه که در سال ۲۰۲۵ برای انتقال نماها تغییر کرده است، ارائه می‌دهد.

پشتیبانی بهتر از مرورگرها و فریم‌ورک‌ها

انتقال‌های نمای سند یکسان در شرف تبدیل شدن به حالت پایه هستند. به تازگی در دسترس قرار گرفته‌اند.

یکی از حوزه‌های تمرکز Interop 2025 ، رابط برنامه‌نویسی کاربردی (API) انتقال نمایش (View Transition) است، به ویژه انتقال‌های نمایش در یک سند واحد با document.startViewTransition(updateCallback) ، view-transition-class ، نامگذاری خودکار با view-transition-name: match-element و انتخابگر CSS :active-view-transition .

فایرفاکس قصد دارد این ویژگی‌ها را در نسخه آتی فایرفاکس ۱۴۴ که در ۱۴ اکتبر ۲۰۲۵ پایدار می‌شود، بگنجاند. این امر باعث می‌شود این ویژگی‌ها به صورت پایه‌ای (Baseline Newly) در دسترس قرار گیرند.

پشتیبانی از رابط برنامه‌نویسی کاربردی View Transition اکنون در هسته React قرار دارد.

در طول سال، تیم React روی اضافه کردن انتقال‌های view به هسته React کار کرده است. آنها در ماه آوریل پشتیبانی react@experimental را اعلام کردند و این هفته، در React Conf، پشتیبانی از آن را به react@canary منتقل کردند، به این معنی که طراحی نزدیک به نهایی شدن است.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

برای جزئیات بیشتر می‌توانید مستندات <ViewTransition> مربوط به React را بررسی کنید یا برای آشنایی بیشتر با این موضوع ، این سخنرانی آرورا شارف را تماشا کنید .

ویژگی‌های اخیراً ارسال شده

نام‌گذاری خودکار عناصر با view-transition-name: match-element

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

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

به لطف match-element نیازی به انجام همه این کارها نیست. هنگام استفاده از این به عنوان مقدار برای view-transition-name ، مرورگر بر اساس هویت عنصر، یک view-transition-name داخلی برای هر عنصر منطبق تولید می‌کند.

در دموی زیر از این رویکرد استفاده شده است. هر کارت در ردیف، یک view-transition-name به طور خودکار تولید می‌شود، دریافت می‌کند.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

کارتی که وارد یا خارج می‌شود، یک نام مشخص می‌گیرد. این نام در CSS برای الصاق انیمیشن‌های خاص به آن snapshot استفاده می‌شود. snapshotهای سایر کارت‌ها با استفاده از view-transition-class مرتبط با آنها، استایل‌بندی می‌شوند.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

DevTools اکنون قوانینی را نشان می‌دهد که شبه‌برنامه‌هایی را هدف قرار می‌دهند که از یک view-transition-class استفاده می‌کنند.

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

پیش از این، هنگام بررسی یکی از شبه‌عنصرهای ::view-transition-* ، ابزارهای توسعه کروم (Chrome DevTools) قوانینی را که برای شبه‌عنصرها با استفاده از view-transition-class تنظیم شده بودند، نمایش نمی‌دادند. این موضوع در کروم ۱۳۹ تغییر کرد و این قابلیت به آن اضافه شد.

گروه‌های انتقال نمای تو در تو از کروم ۱۴۰ در دسترس هستند

وقتی یک گذار نما اجرا می‌شود، عناصر اسنپ‌شات‌شده را در درختی از شبه‌عناصر رندر می‌کند. به‌طور پیش‌فرض، درخت تولیدشده "مسطح" است. این بدان معناست که سلسله مراتب اصلی در DOM از بین می‌رود و همه گروه‌های گذار نمای ثبت‌شده، خواهر و برادرهایی تحت یک شبه‌عنصر ::view-transition هستند.

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

به لطف «گروه‌های انتقال نمای تودرتو» اکنون می‌توانید شبه‌عنصرهای ::view-transition-group درون یکدیگر قرار دهید. وقتی گروه‌های انتقال نمای تودرتو باشند، می‌توان جلوه‌هایی مانند برش را در طول انتقال بازیابی کرد.

یاد بگیرید چگونه از گروه‌های انتقال نما استفاده کنید

شبه عناصر اکنون ویژگی‌های انیمیشن بیشتری را به ارث می‌برند

وقتی یکی از ویژگی‌های animation-* longhand را روی یک شبه ::view-transition-group(…) تنظیم می‌کنید، ::view-transition-image-pair(…) ، ::view-transition-old(…) و ::view-transition-new(…) نیز آن ویژگی را به ارث می‌برند. این مفید است زیرا به طور خودکار محو شدن متقاطع بین ::view-transition-new(…) و ::view-transition-old(…) را با ::view-transition-group(…) همگام نگه می‌دارد.

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

در ابتدا این ارث‌بری محدود به animation-duration و animation-fill-mode (و بعداً animation-delay نیز) بود، اما اکنون این قابلیت گسترش یافته تا انیمیشن‌های بیشتری را به ارث ببرد.

مرورگرهایی که از انتقال نما پشتیبانی می‌کنند، اکنون باید موارد زیر را در شیوه‌نامه‌ی عامل کاربر خود داشته باشند:

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

شبه‌عناصری که ویژگی‌های بیشتری را به ارث می‌برند ، در کروم ۱۴۰ ارائه شده‌اند.

اجرای تابع فراخوانی promise finished دیگر منتظر فریم نمی‌ماند.

هنگام استفاده از promise finished برای اجرای یک callback، کروم قبل از اجرای آن منطق، منتظر تولید یک فریم می‌ماند. این امر می‌تواند باعث ایجاد لرزش در انتهای انیمیشن شود، زمانی که اسکریپت برخی از استایل‌ها را در تلاش برای حفظ حالت بصری مشابه، جابجا می‌کند.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}>).finished.then(() = {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

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

این تغییر زمان‌بندی در کروم ۱۴۰ اعمال شد.

ویژگی‌های آینده

سال هنوز تمام نشده، بنابراین هنوز کمی زمان برای ارائه ویژگی‌های بیشتر وجود دارد.

انتقال‌های نمای محدود برای آزمایش در کروم ۱۴۰ آماده هستند

انتقال‌های نمای محدود (scoped view transition) یک افزونه پیشنهادی برای API انتقال نمای (View Transition API) است که به شما امکان می‌دهد با فراخوانی element.startViewTransition() (به جای document.startViewTransition() ) در هر HTMLElement ، یک انتقال نمای (view transition) را در یک زیردرخت از DOM شروع کنید.

انتقال‌های محدود به چندین انتقال نما اجازه می‌دهند که همزمان اجرا شوند (تا زمانی که ریشه‌های انتقال متفاوتی داشته باشند). رویدادهای اشاره‌گر فقط روی آن زیردرخت (که می‌توانید دوباره فعال کنید) و نه روی کل سند، اعمال نمی‌شوند. علاوه بر این، آنها اجازه می‌دهند عناصر خارج از ریشه انتقال روی انتقال نمای محدود به نمایش درآیند.

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

این ویژگی برای آزمایش از کروم ۱۴۰ با فعال بودن پرچم «ویژگی‌های پلتفرم وب آزمایشی» در chrome://flags آماده است. ما به طور فعال به دنبال بازخورد توسعه‌دهندگان هستیم.

موقعیت ::view-transition در کروم ۱۴۲ از fixed به absolute تغییر خواهد کرد.

شبه کد ::view-transition در حال حاضر با استفاده از position: fixed موقعیت‌یابی می‌شود. پس از تصمیم‌گیری گروه کاری CSS، این مقدار به position: absolute تغییر خواهد کرد.

این تغییر مقدار position از fixed به absolute - که به کروم ۱۴۲ می‌آید - از نظر بصری قابل مشاهده نیست زیرا بلوک حاوی شبه ::view-transition در هر صورت بلوک حاوی snapshot است. تنها اثر قابل مشاهده، مقدار position متفاوت هنگام انجام getComputedStyle است.

document.activeViewTransition به کروم ۱۴۲ می‌آید

وقتی یک گذار (transition) از یک نما (view) آغاز می‌شود، یک نمونه ViewTransition ایجاد می‌شود. این شیء شامل چندین promise و قابلیت برای ردیابی پیشرفت گذار و همچنین امکان دستکاری‌هایی مانند رد کردن گذار یا تغییر انواع آن است.

به جای اینکه شما را ملزم به پیگیری دستی این نمونه کند، کروم اکنون یک ویژگی document.activeViewTransition ارائه می‌دهد که این شیء را نشان می‌دهد. اگر هیچ انتقالی در حال انجام نباشد، مقدار آن null است.

برای انتقال‌های نمای سند یکسان، مقدار هنگام فراخوانی document.startViewTransition تنظیم می‌شود. برای انتقال‌های نمای سند متقابل، می‌توانید در رویدادهای pageswap و pagereveal به آن نمونه ViewTransition دسترسی پیدا کنید.

پشتیبانی از document.activeViewTransition در شرف ارائه در کروم ۱۴۲ است.

با استفاده از ViewTransition.waitUntil از اتمام خودکار انتقال نما جلوگیری کنید.

یک گذار (transition) نمای (view) به طور خودکار زمانی به حالت finished خود می‌رسد که تمام انیمیشن‌های آن تمام شده باشند. برای جلوگیری از این پایان خودکار، می‌توانید به زودی ViewTranistion.waitUntil استفاده کنید. هنگام ارسال یک promise، ViewTransition تنها زمانی به حالت finished خود می‌رسد که آن promise ارسال شده نیز حل (resolve) شود.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

این تغییر اواخر امسال از راه می‌رسد و به عنوان مثال، امکان انتظار برای fetch یا باز کردن قفل پیاده‌سازی آسان‌تر گذار نمای اسکرول-محور را فراهم می‌کند.

قدم بعدی چیست؟

همانطور که می‌بینید، از زمان عرضه اولیه View Transitions در سال ۲۰۲۳، ما بی‌حرکت ننشسته‌ایم. مشتاقانه منتظر عرضه انتقال‌های نمای محدود در آینده هستیم و مثل همیشه، پذیرای بازخوردها هستیم.

اگر در مورد انتقال نماها سؤالی دارید، در رسانه‌های اجتماعی با ما در ارتباط باشید. درخواست‌های ویژگی برای انتقال نماها را می‌توان در گروه کاری CSS ثبت کرد . در صورت مواجهه با اشکال، برای اطلاع ما ، یک «اشکال کرومیوم» ثبت کنید .