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

Bramus

تاریخ انتشار: 08 اکتبر 2025

از زمانی که ما در سال 2023 انتقال نمای سند مشابه را ارسال کردیم، خیلی تغییر کرده است.

در سال 2024 ، انتقال‌های نمای متقاطع اسناد را ارسال کردیم، اصلاحاتی مانند انواع view-transition-class و view را اضافه کردیم و همچنین از Safari در افزودن پشتیبانی برای انتقال view استقبال کردیم.

این پست به شما یک نمای کلی از تغییرات تغییر مشاهده در سال 2025 ارائه می دهد.

پشتیبانی بهتر از مرورگر و چارچوب

انتقال‌های نمای همان سند در شرف تبدیل شدن به خط پایه هستند. جدیداً در دسترس است

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

فایرفاکس قصد دارد این ویژگی‌ها را در نسخه آتی فایرفاکس 144 که در 14 اکتبر 2025 پایدار می‌شود، قرار دهد. این ویژگی‌ها را به تازگی در دسترس قرار می‌دهد.

پشتیبانی از View Transition API اکنون در هسته React است

در طول سال، تیم React در حال کار بر روی افزودن انتقال دید به هسته 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 را بررسی کنید یا این سخنرانی Aurora Scharff را برای معرفی خوب در مورد موضوع تماشا کنید .

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

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

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

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

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

قبلاً، هنگام بازرسی یکی از شبه عناصر ::view-transition-* ، ابزار توسعه دهنده Chrome قوانینی را که با استفاده از مجموعه view-transition-class خود برای شبه‌ها هدف قرار می‌دادند، نشان نمی‌داد. این در کروم 139 تغییر کرد که عملکرد را اضافه کرد.

گروه‌های انتقال نمای تودرتو از Chrome 140 در دسترس هستند

هنگامی که یک انتقال view اجرا می شود، عناصر عکس فوری را در درختی از شبه عناصر رندر می کند. به طور پیش فرض، درخت تولید شده "مسطح" است. این به این معنی است که سلسله مراتب اصلی در DOM از بین رفته است و همه گروه‌های انتقال view گرفته شده خواهر و برادر تحت یک شبه عنصر ::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 نیز) محدود بود، اما اکنون این به ارث بردن بیشتر انیمیشن های طولانی مدت گسترش یافته است.

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

: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;
}

شبه عناصری که ویژگی‌های بیشتری را به ارث می‌برند در Chrome 140 ارسال شدند.

اجرای فراخوان وعده finished دیگر منتظر یک فریم نیست

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

 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 همچنان ساختار انتقال دید را حفظ می‌کند و در نتیجه از سوسو زدن جلوگیری می‌کند.

این تغییر زمان در Chrome 140 ارسال شد.

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

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

انتقال‌های نمای محدوده‌ای برای آزمایش در Chrome 140 آماده هستند

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

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

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

این ویژگی برای آزمایش از Chrome 140 با پرچم "ویژگی های پلتفرم وب آزمایشی" در chrome://flags فعال است. ما فعالانه به دنبال بازخورد توسعه‌دهندگان هستیم.

موقعیت ::view-transition از fixed به absolute در Chrome 142 تغییر خواهد کرد

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

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

document.activeViewTransition به Chrome 142 می آید

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

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

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

پشتیبانی از document.activeViewTransition در Chrome 142 در شرف ارسال است.

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

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

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

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

بعدش چی

همانطور که می‌بینید، از زمانی که View Transitions را در سال 2023 ارسال کردیم، بی‌حرکت نمانده‌ایم. ما مشتاقانه منتظر ارسال انتقال‌های نمای محدوده‌ای در آینده هستیم و مانند همیشه، آماده بازخورد هستیم.

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

Bramus

تاریخ انتشار: 08 اکتبر 2025

از زمانی که ما در سال 2023 انتقال نمای سند مشابه را ارسال کردیم، خیلی تغییر کرده است.

در سال 2024 ، انتقال‌های نمای متقاطع اسناد را ارسال کردیم، اصلاحاتی مانند انواع view-transition-class و view را اضافه کردیم و همچنین از Safari در افزودن پشتیبانی برای انتقال view استقبال کردیم.

این پست به شما یک نمای کلی از تغییرات تغییر مشاهده در سال 2025 ارائه می دهد.

پشتیبانی بهتر از مرورگر و چارچوب

انتقال‌های نمای همان سند در شرف تبدیل شدن به خط پایه هستند. جدیداً در دسترس است

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

فایرفاکس قصد دارد این ویژگی‌ها را در نسخه آتی فایرفاکس 144 که در 14 اکتبر 2025 پایدار می‌شود، قرار دهد. این ویژگی‌ها را به تازگی در دسترس قرار می‌دهد.

پشتیبانی از View Transition API اکنون در هسته React است

در طول سال، تیم React در حال کار بر روی افزودن انتقال دید به هسته 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 را بررسی کنید یا این سخنرانی Aurora Scharff را برای معرفی خوب در مورد موضوع تماشا کنید .

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

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

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

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

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

قبلاً، هنگام بازرسی یکی از شبه عناصر ::view-transition-* ، ابزار توسعه دهنده Chrome قوانینی را که با استفاده از مجموعه view-transition-class خود برای شبه‌ها هدف قرار می‌دادند، نشان نمی‌داد. این در کروم 139 تغییر کرد که عملکرد را اضافه کرد.

گروه‌های انتقال نمای تودرتو از Chrome 140 در دسترس هستند

هنگامی که یک انتقال view اجرا می شود، عناصر عکس فوری را در درختی از شبه عناصر رندر می کند. به طور پیش فرض، درخت تولید شده "مسطح" است. این به این معنی است که سلسله مراتب اصلی در DOM از بین رفته است و همه گروه‌های انتقال view گرفته شده خواهر و برادر تحت یک شبه عنصر ::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 نیز) محدود بود، اما اکنون این به ارث بردن بیشتر انیمیشن های طولانی مدت گسترش یافته است.

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

: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;
}

شبه عناصری که ویژگی‌های بیشتری را به ارث می‌برند در Chrome 140 ارسال شدند.

اجرای فراخوان وعده finished دیگر منتظر یک فریم نیست

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

 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 همچنان ساختار انتقال دید را حفظ می‌کند و در نتیجه از سوسو زدن جلوگیری می‌کند.

این تغییر زمان در Chrome 140 ارسال شد.

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

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

انتقال‌های نمای محدوده‌ای برای آزمایش در Chrome 140 آماده هستند

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

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

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

این ویژگی برای آزمایش از Chrome 140 با پرچم "ویژگی های پلتفرم وب آزمایشی" در chrome://flags فعال است. ما فعالانه به دنبال بازخورد توسعه‌دهندگان هستیم.

موقعیت ::view-transition از fixed به absolute در Chrome 142 تغییر خواهد کرد

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

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

document.activeViewTransition به Chrome 142 می آید

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

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

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

پشتیبانی از document.activeViewTransition در Chrome 142 در شرف ارسال است.

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

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

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

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

بعدش چی

همانطور که می‌بینید، از زمانی که View Transitions را در سال 2023 ارسال کردیم، بی‌حرکت نمانده‌ایم. ما مشتاقانه منتظر ارسال انتقال‌های نمای محدوده‌ای در آینده هستیم و مانند همیشه، آماده بازخورد هستیم.

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