‏انیمیشن بین صفحه‌ها فقط با CSS و بدون جاوااسکریپت

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

شروع کار فقط یه at-rule لازم داره که باید رو همهٔ صفحه‌هایی که قراره تو انیمیشن شرکت کنن باشه:

@view-transition {
  navigation: auto;
}

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

برای سفارشی کردن انیمیشن، مرورگر چند تا pseudo-element می‌سازه: ::view-transition-group(root) که wrapper کل انیمیشنه، ::view-transition-old(root) که اسنپ‌شات صفحهٔ قدیمیه و ::view-transition-new(root) که اسنپ‌شات صفحهٔ جدیده. نویسنده میگه مدت‌زمان و تایمینگ رو رو group بذار، و برای یه اسلاید واقعی با @keyframes خودت انیمیشن صفحهٔ خروجی و ورودی رو بساز و با animation-name به همین pseudo-elementها وصلشون کن.

یه نکتهٔ کاربردی اینه که اگه کل صفحه اسلاید بخوره، نوار ناوبری هم که رو هر دو صفحه یکیه باهاش می‌ره، که حس بدی داره. راه‌حلش اینه که به‌جای root، یه اسم دلخواه با view-transition-name فقط به همون المانی بدی که می‌خوای حرکت کنه (مثلاً main)، تا بقیه ثابت بمونن.

باحال‌ترین ترفند هم morph کردن یه عکس مشترکه: یه تصویر که هم تو کارت لیست هست و هم به‌عنوان عکس بزرگ صفحهٔ جزئیات، اگه view-transition-name یکسان بگیره، مرورگر موقع کلیک نرم از اندازهٔ کوچیک به بزرگ بازش می‌کنه. نویسنده هشدار می‌ده که این مورف تو Safari لرزش (stutter) داره چون بیشتر کار رو رو main thread انجام می‌ده؛ یکسان کردن هندسهٔ اسنپ‌شات‌ها با object-fit: cover و کوتاه‌تر کردن مدت انیمیشن این لرزش رو کم می‌کنه.

نویسنده آخرش سه تا نکتهٔ عملی رو یادآوری می‌کنه و تأکید می‌کنه کل این قابلیت به‌صورت progressive enhancement طراحی شده: اگه مرورگری پشتیبانی نکنه، فقط مثل قبل عادی ناوبری می‌کنه و همون قطعِ ناگهانی fallback می‌شه، نه یه ارور.

نکات کلیدی:

• با @view-transition و navigation: auto بدون جاوااسکریپت بین دو صفحه انیمیشن می‌گیری
• فقط تو یه origin کار می‌کنه و هر دو صفحه باید CSS مشترک داشته باشن
• با pseudo-elementهای old/new/group و @keyframes انیمیشن سفارشی می‌سازی
• با view-transition-name می‌شه نوار ناوبری رو ثابت نگه داشت یا یه عکس رو بین دو صفحه morph کرد
• مورف عکس تو Safari لرزش داره؛ object-fit: cover و انیمیشن کوتاه‌تر کمکش می‌کنه
• پشتیبانی: Chrome/Edge از نسخهٔ ۱۲۶ و Safari از ۱۸.۲؛ روی Firefox پشت فلگه