View Transition API به شما امکان می دهد DOM را در یک مرحله به روز کنید و در عین حال یک انتقال متحرک بین دو حالت ایجاد کنید.
این نوع انتقال‌ها ویژگی‌ای بود که اغلب از سوی توسعه‌دهندگان، از جمله من، درخواست می‌شد، و فکر می‌کنم ما موفق شده‌ایم آن را به گونه‌ای پیاده کنیم که پیش‌فرض‌های خوب را با توسعه‌پذیری و سفارشی‌سازی متعادل کند. به نظر می رسد که ما به خودمان دست می زنیم، اما بازخورد توسعه دهندگان کلید طراحی این ویژگی بود. نمونه اولیه این ویژگی بسیار کمتر انعطاف‌پذیر بود، و افرادی (مثل شما؟) که برای بازی با نمونه‌های اولیه و ارائه بازخورد وقت گذاشتند، باعث بازنگری کامل شدند. متشکرم!
برای درک این ویژگی و بازی با برخی از دموها، راهنمای ما را بررسی کنید . اگر چیزی وجود دارد که احساس می‌کنید در آنجا پوشش داده نشده است، لطفاً از طریق توییتر، ماستودون یا از طریق ایمیل با من تماس بگیرید .
View Transition API در حال حاضر فقط در Chrome موجود است. خوشبختانه می توان از آن به عنوان یک بهبود پیشرونده استفاده کرد. این راهنما شامل یک تابع کمکی است که می‌توانید از آن در مرورگرها استفاده کنید، اما فقط مرورگرهایی که از انتقال view پشتیبانی می‌کنند، انیمیشن را دریافت می‌کنند.
ما این ویژگی را در گروه کاری CSS با ورودی سایر فروشندگان مرورگر و افراد مستقل توسعه دادیم . ما نمی دانیم که آیا مرورگرهای دیگر چه زمانی از View Transitions استفاده می کنند یا خیر، اما مراقب موقعیت استانداردهای موزیلا و موقعیت استاندارد WebKit باشید.
اما، ما هنوز "تمام" نشده ایم!
قابلیت فرود در Chrome 111 تنها اولین نسخه است. امیدواریم قبلاً همه اشکالات را پیدا کرده باشیم، اما لطفاً هر مشکلی را که پیدا کردید در crbug.com ، ترجیحاً با نسخه نمایشی کاهش یافته، ارسال کنید. اگر این چیزی است که شما با آن آشنا یا راحت نیستید، در توییتر، ماستودون یا از طریق ایمیل با من تماس بگیرید ، و من به شما کمک خواهم کرد.
این نسخه بخشی کوچک اما امیدوارانه مفید از یک تصویر بزرگتر است. ما قبلاً برخی از برنامه‌های افزودنی را برای این ویژگی ترسیم کرده‌ایم تا مطمئن شویم قطعاتی که امروز ارسال می‌کنیم با آینده سازگار هستند.
در اینجا یک پیش نمایش دزدکی از آنچه ما فکر می کنیم است. این‌ها به ترتیب اولویت نیستند (خوب، شاید اولین مورد برای بسیاری از افراد مهم‌تر باشد)، بنابراین ما دوست داریم درباره اینکه کدام افزوده‌ها برای شما مهم‌تر هستند، بازخورد داشته باشیم.
انتقال در اسناد
این همان چیزی است که فکر می‌کنم بیشتر توسعه‌دهندگان از ما می‌خواهند که بعداً روی آن کار کنیم، و خبر خوب این است که ما در حال حاضر روی آن کار می‌کنیم!
View Transitions API طوری طراحی شده است که بتواند در اسناد هم منشاء کار کند. تنها تفاوت این است که به جای اینکه startViewTransition تغییر وضعیت DOM را علامت دهد، خود ناوبری آن تغییر را نشان می دهد.
نمونه اولیه ما از این در پشت پرچم chrome://flags/#view-transition-on-navigation . در اینجا یک نسخه نمایشی بسیار ساده و یک نسخه آزمایشی پیچیده تر است.
برای پیشبرد این امر، باید بفهمیم که هر صفحه چگونه در انتقال انتخاب می شود. در حال حاضر ما از یک متا تگ استفاده می کنیم: <meta name="view-transition" content="same-origin"> ، اما فکر می کنیم CSS مکان بهتری برای این کار است. ما همچنین می خواهیم آسان تر بدانیم که از چه نوع صفحه ای در حال انتقال هستید، ترجیحاً بدون نیاز به نوشتن جاوا اسکریپت.
کارهای زیادی برای انجام دادن وجود دارد، و ما ترجیح می‌دهیم آن را «درست» به جای «سریع» انجام دهیم، اما قطعاً برای ما یک اولویت است.
انیمیشن های آهنگساز محور
ما انتخاب کردیم که عرض و ارتفاع را در گروه‌های انتقال به‌طور پیش‌فرض متحرک کنیم، زیرا سفارشی‌سازی آن بسیار آسان‌تر است. با این حال، این بدان معناست که انیمیشن روی رشته اصلی اجرا می‌شود، که ایده‌آل نیست، به خصوص در هنگام بارگذاری صفحه.
ما قصد داریم انیمیشن‌های پیش‌فرض و سفارشی‌سازی‌های رایج را شناسایی کنیم، سپس آن‌ها را به عنوان انیمیشن‌های مبتنی بر ترکیب برای افزایش عملکرد خوب تفسیر کنیم.
انتقال های محدوده
در حال حاضر، انتقال SPA به کل سند محدود شده است، و تنها یک انتقال می تواند در یک زمان اجرا شود. ما می‌خواهیم ویژگی‌ای را معرفی کنیم که اجازه می‌دهد تا انتقال‌ها به یک عنصر خاص محدود شوند تا چندین مؤلفه صفحه بتوانند انتقال‌ها را به طور مستقل اجرا کنند.
این به یک پخش‌کننده ویدیوی تعبیه‌شده اجازه می‌دهد تا همزمان با یک ویجت چت تعبیه‌شده، از انتقال‌های مشاهده استفاده کند.
گروه های انتقال تودرتو
در حال حاضر، همه ::view-transition-group ها خواهر و برادر هستند. این اغلب چیز خوبی است، زیرا به نماها اجازه می دهد از یک ظرف به ظرف دیگر منتقل شوند، و شما لازم نیست نگران بریده شدن باشید.
با این حال، گاهی اوقات می‌خواهید یک نما توسط برخی از والدین بریده شود، که ممکن است در انتقال نیز نقش داشته باشد.
ما می‌خواهیم انتخابی را بررسی کنیم که یک ::view-transition-group خاص را در ::view-transition-group دیگری قرار می‌دهد.
کلاس های انتقال
هر view-transition-name باید منحصر به فرد باشد. به این ترتیب است که ما تشخیص می دهیم که یک عنصر خاص از نظر مفهومی "یکسان" در دو طرف تغییر DOM است، حتی اگر به معنای واقعی کلمه همان عنصر نباشد.
با این حال، گاهی اوقات چیزهایی با view-transition-name متفاوت باید از همان نوع انیمیشن استفاده کنند. در حال حاضر، این به معنای افزودن یک قانون انتخابگر برای هر view-transition-name است.
ما می خواهیم راهی برای ایجاد کلاس های انتقال برای غلبه بر این محدودیت اضافه کنیم.
عناصر خارج از صفحه را نادیده بگیرید
اگر به یک عنصر یک view-transition-name بدهید، آن عنصر به عنوان گروه خودش در انتقال شرکت خواهد کرد. گاهی اوقات این ایده آل نیست. به عنوان مثال، اگر به یک عنوان یک view-transition-name بدهید، و از حالتی که 2000 پیکسل به پایین اسکرول می‌شوید، به حالتی در بالای صفحه بروید، هدر از فاصله 2000 پیکسلی متحرک خواهد شد. که از نظر زمان بندی اشتباه احساس می شود.
در عوض، می‌خواهیم یک گزینه انتخابی اضافه کنیم که در آن یک عنصر نادیده گرفته می‌شود ، گویی که view-transition-name ندارد، اگر کاملاً خارج از viewport باشد.
می‌توانید این کار را با جاوا اسکریپت با تنظیم پویا style.viewTransitionName انجام دهید، اما به نظر می‌رسد که باید یک راه‌حل اعلامی برای این کار داشته باشیم.
requestAnimation انیمیشن های فریم محور
از قبل می‌توانید انیمیشن‌های انتقال مشاهده را با جاوا اسکریپت از طریق API انیمیشن‌های وب ایجاد کنید، اما گاهی اوقات لازم است که با requestAnimationFrame همه چیز را فریم به فریم هدایت کنید.
شما در حال حاضر می توانید این کار را انجام دهید، اما کمی هک است. در اینجا یک نسخه ی نمایشی با چند کمک وجود دارد که ممکن است برایتان مفید باشد. ما می خواهیم آن را هک نکنیم!
ما این کار را در دو بخش انجام خواهیم داد. یکی، با ارائه یک API برای نشان دادن زمان انجام انیمیشن . و دوم، با ارائه دسترسی جاوا اسکریپت به شبه عناصر . قسمت دوم ممکن است کار بسیار بزرگی باشد، اما در درازمدت کار درستی به نظر می رسد.
حالا بروید چند تغییر نمای عالی ایجاد کنید!
امیدوارم شما هم مانند من از حال و آینده این ویژگی هیجان زده باشید. اگر بازخوردی دارید، یا فقط می‌خواهید برخی از انتقال‌های نمایشی را که انجام داده‌اید نشان دهید، چه نرم و کاربردی باشند، چه ساده ، لطفاً در توییتر یا ماستودون با من تماس بگیرید !