‏@vtbag: جعبه‌ابزار کامل View Transition API

اگه تا حالا با View Transition API کار کرده باشی، می‌دونی که می‌تونه هم جذاب باشه هم کمی گیج‌کننده. @vtbag دقیقاً برای همین اومده: یه مجموعه‌ی کامل از ابزارها، نکات و ترفندها که تجربه‌ی کار با این API رو روان‌تر می‌کنه. نکته‌ی مهم اینه که این مجموعه کاملاً فریم‌ورک‌آگنوستیک طراحی شده، یعنی نه به Astro وابسته‌ست، نه به React، نه به هیچ چیز دیگه‌ای.

@vtbag از نظر فلسفی وارث astro-vtbot ـه؛ پروژه‌ای که قبلاً برای جامعه‌ی Astro ساخته شده بود و دموهای فنی، کامپوننت‌های قابل‌استفاده‌ی مجدد و انبوهی از تیپس و تریک‌ها رو ارائه می‌داد. حالا با گسترش پشتیبانی مرورگرها از View Transition API و معرفی level 2 اون (که انتقال‌های cross-document رو با CSS خالص ممکن می‌کنه)، @vtbag این مفهوم «کیسه‌ی ترفند» رو به سطح کلی‌تری برده.

مهم‌ترین ابزارهایی که الان توی این مجموعه هستن:

• Inspection Chamber: یه دواتول درون‌مرورگری که بهت اجازه می‌ده view transitionهاتو به‌صورت تعاملی تست و بررسی کنی.
• Element Crossing: برای انتقال state (مثل موقعیت پخش ویدیو) بین صفحات مختلف در cross-document view transitionها.
• Turn Signal: تایپ‌های view transition رو تنظیم می‌کنه تا بتونی با CSS انیمیشن‌های رفت و برگشت رو جداگانه استایل بدی.
• Cam-Shaft: تصاویر view transition رو سر جاشون تنظیم می‌کنه تا از اسکرول ناخواسته‌ی شبه‌نرم جلوگیری بشه.
• Utensil Drawer: یه کشوی ابزار که ریزابزارهای متفرقه رو نگه می‌داره.

یکی از نکات جالب @vtbag اینه که روی مفهوم progressive enhancement تمرکز داره. یعنی اگه مرورگر کاربر از View Transition API پشتیبانی نکنه، سایت همچنان کار می‌کنه، فقط انیمیشن‌ها نمایش داده نمی‌شن.

برای کسایی که می‌خوان cross-document transitionها (یعنی انتقال انیمیشنی بین صفحات مختلف یک MPA) داشته باشن، دیگه نیازی به روتر سمت کلاینت نیست. با level 2 این API، می‌شه همه چیز رو صرفاً با CSS تعریف کرد:

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: slide-out 0.3s ease;
}

::view-transition-new(root) {
  animation: slide-in 0.3s ease;
}

این یعنی کمترین overhead ممکن و حداکثر سازگاری با هر فریم‌ورک یا حتی سایت‌های بدون فریم‌ورک.

بخش محتوایی سایت @vtbag با Starlight (که روی Astro بنا شده) ساخته شده، اما دموها و ابزارها کاملاً مستقل از Astro هستن و فقط به پشتیبانی بومی مرورگر نیاز دارن. برای انتقال‌های cross-document هم باید مرورگر از level 2 این API پشتیبانی کنه.

علاوه بر ابزارها، @vtbag یه سری CSS tips & tricks عملی برای استایل‌دهی به view transitionها داره، یه mini-series آموزشی به اسم «Fun with View Transitions» و یه صفحه‌ی تست برای اینکه ببینی مرورگرت چقد از این API پشتیبانی می‌کنه. پروژه‌های بیشتری هم در راهن که می‌شه توی GitHub دنبالشون کرد.

نکات کلیدی:

• @vtbag یه مجموعه‌ی فریم‌ورک‌آگنوستیک برای کار با View Transition API مرورگره
• ابزارهایی مثل Inspection Chamber, Turn Signal, Element Crossing و Cam-Shaft ارائه می‌ده
• جانشین معنوی astro-vtbot محسوب می‌شه ولی محدود به Astro نیست
• با level 2 این API، cross-document transition بدون روتر سمت کلاینت و فقط با CSS ممکنه
• رویکرد progressive enhancement داره؛ بدون پشتیبانی مرورگر هم سایت خراب نمی‌شه
• ابزار Inspection Chamber به دیباگ تعاملی انیمیشن‌ها کمک می‌کنه