‏درک درخت شبه‌المان‌های View Transition در CSS

نویسنده توضیح می‌ده که هر بار یه view transition شروع می‌شه، مرورگر یه شبه‌المان به تگ HTML اضافه می‌کنه که در طول transition مثل یه لایه snapshot روی کل صفحه قرار می‌گیره. چون مرورگر بیشتر کارِ سنگین رو خودش انجام می‌ده، فهمیدنِ اینکه واقعاً زیر کاپوت چی می‌گذره سخته؛ هدف مقاله اینه که این درخت رو باز کنه تا بدونی موقع شخصی‌سازی چی رو باید target کنی.

همه المان‌هایی که خاصیت view-transition-name دارن، توی این درخت قرار می‌گیرن. به‌صورت پیش‌فرض فقط تگ HTML این نام رو می‌گیره و یه گروه root به اندازه کل صفحه ساخته می‌شه که روی همه المان‌های تعاملی میاد. نویسنده می‌گه دلیل اینکه گاهی سایتت در طول transition قابل کلیک نیست همینه. به‌محض اینکه به یه المان یه نام بدی، اون از root جدا و روی همون قرار می‌گیره:

.header-image {
  view-transition-name: header-image;
}

برای هر نام، یه ::view-transition-group ساخته می‌شه که مسئول انیمیشن موقعیت، اندازه و چرخشه و همه‌اش خودکار اعمال می‌شه. مرورگر همه گروه‌ها رو با position: absolute گوشه بالا-چپ می‌ذاره و بعد با یه انیمیشن ماتریسی، المان رو به موقعیتی که موقع شروع transition داشت حرکت می‌ده؛ به بیان ساده، translateX و translateY رو از مقدار اولیه به مقدار نهایی animate می‌کنه و اندازه رو هم تغییر می‌ده.

یه نکته مهم که نویسنده بهش اشاره می‌کنه ارث‌بری خواص انیمیشنه: اگه روی view-transition-group خواصی مثل duration، delay، fill-mode یا timing-function رو عوض کنی، همون‌ها روی فرزندهاش یعنی image-pair و old و new هم اعمال می‌شن. توصیه‌اش اینه که این تغییرها رو با خواص جداگانه بدی، نه با شورتهند animation، تا ناخواسته مقدارهای پیش‌فرض یا انیمیشن‌ها رو بازنویسی نکنی.

شبه‌المان ::view-transition-image-pair تنها وظیفه‌اش اعمال isolation: isolate هست؛ یعنی یه stacking context جدید می‌سازه تا mix-blend-modeهای فرزندها فقط با خودشون ترکیب بشن و به بیرون نشت نکنن.

در آخر، ::view-transition-old و ::view-transition-new نشون‌دهنده شکل المان در شروع و پایان انیمیشن هستن. مرورگر روشون یه انیمیشن fade (تغییر opacity) به‌علاوه mix-blend-mode: plus-lighter می‌ذاره. نویسنده می‌گه اگه فقط موقعیت، اندازه (بدون تغییر نسبت) یا چرخش رو عوض کنی، این انیمیشن عملاً چیزی به‌چشم نمیاد؛ ولی اگه نسبت ابعاد (aspect ratio) یا محتوای المان عوض بشه، چون old و new هم‌اندازه نیستن انیمیشن یه‌کم عجیب می‌شه و باید جداگانه هندلش کنی. جمع‌بندیش اینه که وقتی بدونی هر لایه چی رو کنترل می‌کنه، بهتر می‌تونی همون چیزی که لازمه رو هدف بگیری و از پیش‌فرض‌های مرورگر به نفع خودت استفاده کنی.

نکات کلیدی:

• هر view transition یه درخت شبه‌المان روی کل صفحه می‌سازه که گروه root به‌صورت پیش‌فرض جلوی تعامل با صفحه رو می‌گیره
• دادن view-transition-name به یه المان، اون رو از root جدا و یه گروه اختصاصی براش می‌سازه
• view-transition-group انیمیشن موقعیت، اندازه و چرخش رو خودکار با ماتریس هندل می‌کنه
• خواص انیمیشن از group به فرزندها ارث می‌رسه؛ بهتره با خواص جداگانه تنظیم بشن نه شورتهند animation
• image-pair با isolation یه stacking context جدا می‌سازه و old/new با fade و blend بین حالت قبل و بعد انیمیت می‌شن