‏مراقب باش View Transition صفحه رو قفل نکنه

کریس کویر تو یه یادداشت کوتاه هشدار می‌ده که View Transitionها یه عارضه جانبی دارن که خیلی‌ها حواسشون بهش نیست: تا وقتی ترنزیشن در حال اجراست، بقیه صفحه عملاً کلیک‌ناپذیر می‌شه. تو دموی خودش یه دکمه ساده alert() گذاشته که قبل از ترنزیشن کار می‌کنه، ولی وسط اجرای ترنزیشن هیچ واکنشی نشون نمی‌ده.

به گفته نویسنده، اگه با DevTools درخت شبه‌المان‌های ترنزیشن رو باز کنی و روی ::view-transition بری، می‌بینی که این المان کل ویوپورت رو پوشونده. همین لایه نامرئیه که نمی‌ذاره کلیک به عناصر زیرش برسه. المان‌های اسنپ‌شات‌شده هم موقع ترنزیشن روی «تاپ لیر» می‌رن و کلیک‌ها رو جذب می‌کنن.

راه‌حلی که پیشنهاد می‌کنه دو تیکه‌ست. اول اینکه :root به‌صورت پیش‌فرض یه view-transition-name داره و بی‌دلیل وارد ترنزیشن می‌شه، پس اسمشو برمی‌داریم. دوم اینکه pointer-events رو روی خود ::view-transition خاموش می‌کنیم تا کلیک ازش رد بشه:

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

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

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

نویسنده می‌گه اسکوپ‌کردن جدا از این مسئله هم ایده خوبیه؛ مثلاً اجازه می‌ده عناصر داخل ناحیه‌ای با overflow مخفی بمونن. البته پشتیبانی مرورگرها برای فراخوانی روی document هنوز بهتره، و اگه بخوای داخل خود ناحیه اسکوپ‌شده هم تعامل حفظ بشه، باز همون تنظیمات CSS به کارت میاد.

نکات کلیدی:

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