‏با View Transition، بقیه صفحه رو کلیک‌ناپذیر نکن

کریس کویر (Chris Coyier) تو یه پست کوتاه هشدار می‌ده که استفاده از View Transition API (یعنی رابط مرورگر که با متد startViewTransition() بین دو حالت صفحه یه ترنزیشن نرم انیمیشنی اجرا می‌کنه) می‌تونه بدون این‌که بفهمی، بقیه‌ی صفحه رو موقتاً غیرقابل‌کلیک کنه. مثلاً وقتی یه عکس رو بزرگ می‌کنی یا آیتم‌های یه لیست رو جابه‌جا می‌کنی، در طول ترنزیشن نمی‌تونی روی هیچ دکمه‌ی دیگه‌ای تو صفحه کلیک کنی.

به گفته‌ی نویسنده، دلیلش یه المنت شبه به اسم ::view-transition ـه که در طول ترنزیشن کل viewport رو می‌پوشونه و روی «لایه‌ی بالایی» صفحه قرار می‌گیره، برای همین کلیک‌ها رو جذب می‌کنه. از اون‌طرف چون :root به‌صورت پیش‌فرض یه view-transition-name داره، خودش هم بخشی از این ترنزیشن حساب می‌شه، حتی اگه قرار نیست جایی تغییر کنه.

راه‌حل نویسنده دو خط CSS ـه: اول اسم ترنزیشن رو از :root برمی‌داری تا دیگه جزو المنت‌های عکس‌برداری‌شده نباشه، بعد هم pointer-events مربوط به ::view-transition رو none می‌کنی تا کلیک از زیرش رد بشه:

:root {
  view-transition-name: none;
}
::view-transition {
  pointer-events: none;
}

یه راه‌حل جدیدتر هم هست: به‌جای این‌که startViewTransition() رو روی کل document صدا بزنی، می‌تونی همون متد رو روی یه المنت خاص که فقط شامل بخش موردنظرته صدا بزنی. این‌جوری ترنزیشن محدود به همون بخش می‌مونه و بقیه‌ی صفحه اصلاً درگیرش نمی‌شه، هرچند نویسنده می‌گه پشتیبانی مرورگرها از این حالت هنوز به‌اندازه‌ی حالت کامل document نیست:

const parent = document.querySelector("#parent");
parent.startViewTransition(() => {
  thing.classList.toggle("moved");
});

نکات کلیدی:

• المنت شبه ::view-transition در طول ترنزیشن کل viewport رو می‌پوشونه و کلیک‌ها رو مسدود می‌کنه
• راه‌حل سریع: view-transition-name: none روی :root و pointer-events: none روی ::view-transition
• می‌شه به‌جای document.startViewTransition() از parent.startViewTransition() استفاده کرد تا ترنزیشن محدود به یه بخش خاص بمونه
• پشتیبانی مرورگرها از ترنزیشن محدودشده (scoped) هنوز به‌اندازه‌ی حالت document کامل نیست