‏جعبه‌ابزار View Transitions گوگل

این مطلب صفحهٔ معرفیِ یه جعبه‌ابزار از Chrome Labs گوگل به اسم view-transitions-toolkit ـه که برای کار با API گذارهای نمایشی (View Transitions) ساخته شده. این API امکان می‌ده موقع تغییرِ حالت یا جابه‌جایی بین صفحه‌ها یه گذارِ انیمیشنیِ نرم بین وضعیتِ قبل و بعد بسازی، و این جعبه‌ابزار یه سری تابعِ کمکی می‌ده که کارهای سختِ دور و برِ این API رو ساده کنه.

این کتابخونه از چند ماژول جدا تشکیل شده. ماژولِ Feature Detection بهت می‌گه که آیا زیرویژگی‌های خاصِ View Transitions پشتیبانی می‌شن یا نه. یه بخشِ Shim هم برای document.activeViewTransition پشتیبانی فراهم می‌کنه تا تو مرورگرهایی که هنوز ندارنش بشه روش حساب کرد.

بخشِ مهم‌تر ماژولِ Animations ـه که ابزارهایی برای استخراج، اندازه‌گیری و بهینه‌سازیِ انیمیشن‌ها می‌ده. مثلاً با getAnimations می‌شه انیمیشن‌های در جریانِ یه گذار رو دنبال و بررسی کرد، با extractGeometry می‌شه هندسه (اندازه و موقعیتِ) شبه‌المان‌های گذار رو درآورد، و یه بخش هم کمک می‌کنه انیمیشنِ ::view-transition-group رو به‌جای تغییرِ width و height با انیمیشن‌های مبتنی بر transform که کاراترن بهینه کنی.

دوتا قابلیتِ دیگه هم داره: Transition Playback Control که می‌ذاره پخشِ یه گذار رو هم‌زمان متوقف، ادامه یا اسکراب (جابه‌جایی دستی روی خط زمانی) کنی، و Automatic Page Navigation Types که به‌صورت خودکار نوع‌های گذار مثل from- و to- رو بر اساس مبدأ و مقصدِ ناوبری تزریق می‌کنه. یه سری ابزارِ متفرقه هم مثل setTemporaryViewTransitionNames و extractViewTransitionName داخلشه.

برای شروع، کافیه با npm نصبش کنی و بعد فقط همون تابع‌هایی رو که لازم داری از entry pointهای مشخص ایمپورت کنی — مثلاً getAnimations رو از مسیرِ view-transitions-toolkit/animations. کلِ کد روی GitHub در دسترسه و برای هر قابلیت هم چندتا دموی زنده (تشخیص پشتیبانی، اندازه‌گیری، بهینه‌سازی، کنترل پخش، نوع‌های ناوبری و گذارهای مبتنی بر اسکرول) گذاشتن که می‌شه کارکردِ توابع رو عملی دید.

نکات کلیدی:

• موضوع اصلی: یه جعبه‌ابزار از Chrome Labs که کار با API گذارهای نمایشی رو ساده می‌کنه.
• ماژول‌ها: تشخیص پشتیبانی، شیمِ activeViewTransition، استخراج/اندازه‌گیری/بهینه‌سازی انیمیشن، کنترل پخش، و نوع‌های ناوبری خودکار.
• بهینه‌سازی پیشنهادی: استفاده از transform به‌جای تغییرِ width و height برای انیمیشنِ بهتر.
• نصب با npm و ایمپورتِ تابع‌ها از entry pointهای جدا انجام می‌شه.
• برای هر قابلیت دموی زنده و مستندات روی GitHub موجوده.