امروز می‌خواهیم اطلاعات بیشتری درباره سفر Chrome و Astro با View Transitions API به اشتراک بگذاریم. این شامل این است که چگونه جامعه Astro در اوایل API را پذیرفت و با آن آزمایش کرد و امکانات را برای جامعه گسترده‌تر برجسته کرد. ما همچنین مشتاقیم که اطلاعات بیشتری در مورد پشتیبانی داخلی جدید برای View Transitions در Astro 3.0 به اشتراک بگذاریم!
زمینه
انتقال بدون درز بین حالت های مختلف یک صفحه، که به عنوان انتقال وضعیت شناخته می شود، همیشه جنبه پیچیده ای از ایجاد تجربیات متحرک و بدون درز در وب بوده است. علیرغم در دسترس بودن ابزارهایی مانند انتقال CSS، انیمیشن های CSS و Web Animation API، ایجاد انتقال حالت همچنان یک کار دلهره آور باقی مانده است. یکی از چالش ها مدیریت تعامل بر روی عناصر خروجی است که می تواند انتقال ها را پیچیده تر کند.
علاوه بر این، حفظ موقعیت خواندن و تمرکز برای وسایل کمکی دشوار است. و، پرداختن به تفاوت‌های موقعیت اسکرول، انتقال حالت را به فرآیندی دشوار تبدیل می‌کند. همه این عوامل به پیچیدگی اجرای انتقال صاف بین عناصر مختلف در یک صفحه وب کمک می کند
View Transitions API به عنوان راه حل مرورگر برای این چالش ها ظاهر شد. این API جدید راه آسان‌تری برای تغییر DOM در یک مرحله و در عین حال ایجاد یک انتقال متحرک بین دو حالت فراهم می‌کند.
راه‌اندازی View Transitions API در Chrome 111 آغاز چشم‌اندازی گسترده‌تر برای پشتیبانی از انتقال برای همه وب‌سایت‌ها، نه فقط برنامه‌های کاربردی وب مبتنی بر جاوا اسکریپت بود. پیشرفت های آینده نیز در راه است. Chrome ممکن است در آینده موارد اضافه‌شده هیجان‌انگیزی مانند انتقال در اسناد، انیمیشن‌های مبتنی بر ترکیب، انتقال‌های محدوده‌دار و گروه‌های انتقال تودرتو را بررسی کند.
مشاهده نسخه نمایشی: زنده ، منبع
اکتشافات اولیه با انتقال دید
سفر Chrome با View Transitions API یک سفر انفرادی نبود. بازخورد و همکاری از سوی توسعه‌دهندگان، نویسندگان چارچوب و گروه کاری CSS، همگی نقش مهمی در شکل‌دهی این ویژگی در طول چندین سال داشتند.
آزمایش توسعه‌دهنده نقش مهمی در اوایل بازی داشت. اولین نسخه‌های API از انیمیشن‌های CSS پشتیبانی نمی‌کردند و انتقال‌ها به چند ایستگاه از پیش تنظیم محدود محدود می‌شد. بازخورد اولیه نشان داد که توسعه‌دهندگان می‌خواهند انتقال‌ها کاملاً قابل تنظیم و رسا باشند. این همکاری پشت سر هم تضمین می‌کرد که API با تعادلی از پیش‌فرض‌های خوب، توسعه‌پذیری و سفارشی‌سازی طراحی شده است.
Astro یکی از آن فریم ورک هایی بود که زود به View Transitions متمایل شد. بقیه این مقاله از نقطه نظر تیم Astro است و تجربیات آنها را در یافتن، اتخاذ، و ارائه View Transitions به سمت جلو و مرکز به تجربه توسعه وب به اشتراک می گذارد.
چرا Astro روی انتقال مشاهده شرط بندی کرده است
Astro برای مدت طولانی به دنبال چیزی مانند View Transitions بود. Astro یک چارچوب وب جاوا اسکریپت است که برای عملکرد سریع‌تر بارگذاری صفحه، مؤلفه‌های رابط کاربری شما را به HTML سبک‌تر تبدیل می‌کند. Astro عمداً تا حد امکان کار را از دستگاه مشتری خارج می کند. وب‌سایت‌های Astro از ناوبری صفحه مرورگر بومی استفاده می‌کنند، جایی که سایر چارچوب‌های وب ممکن است به جای آن، ناوبری مرورگر را با مسیریابی سمت کلاینت جاوا اسکریپت ربوده باشند.
این معاوضه چالشی را برای تیم Astro ایجاد کرد: چگونه Astro می‌تواند تغییرات صفحه را متحرک کند و بدون استفاده از مسیریابی سمت مشتری، پایداری رابط کاربری برنامه‌مانند را در سراسر صفحات ارائه دهد؟
مشاهده انتقال پاسخ بود. با View Transitions، Astro می‌تواند همان ویژگی‌های مسیریابی را که فریمورک‌های وب SPA با جاوا اسکریپت سنگین ارائه می‌کرد، ارائه کند، اما بدون کارایی و پیچیدگی بالای مسیریابی سمت مشتری. سایر چارچوب‌ها به View Transitions به عنوان یک جزئیات پیاده‌سازی اختیاری نزدیک شدند، اما برای Astro این چیزی بسیار بزرگ‌تر بود.
سوال بعدی که تیم Astro باید به آن پاسخ می داد این بود که "چگونه؟" این تیم برای الهام بخشیدن به پروژه هایی مانند Turbo، Swup و Livewire نگاه کردند و حتی چند رویکرد مشابه را در داخل Astro نمونه سازی کردند.
یکی از اولین تلاش‌ها شامل یک "انتقال هوشمند" تمام صفحه بود که به طور خودکار هر صفحه جدید HTML را با HTML فعلی مقایسه می‌کرد و سپس سعی می‌کرد تا با استفاده از جاوا اسکریپت هر عنصر را به یکباره جایگزین کند. هوشمندانه بود، اما مستعد خطا.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
خوشبختانه، جامعه Astro نشان داد که View Transitions API از قبل قدرتمند بود بدون اینکه محصول چیزها را بیش از حد پیچیده کند. تیم Astro پس از دیدن برخی از دموهای اولیه، ایده Astro API ساده ای را به فروش رساند که بتواند تا حد امکان با API های مرورگر مطابقت داشته باشد. به‌جای اینکه View Transitions را به‌عنوان یک جزییات اجرایی نامرئی که در داخل Astro پنهان شده است، مشاهده کنید، می‌توان آنها را مستقیماً در معرض توسعه‌دهنده قرار داد. تراز مستقیم Astro با پلتفرم وب و کاهش پیچیدگی کلی در بخش ظاهری.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
کار ساده شد: View Transitions API جدید را به Astro بیاورید و بازگشت‌های خودکار را ارائه دهید که تا حد امکان به وب‌سایت‌ها و مرورگرها بیاورد. پشتیبانی مجدد ضروری است، زیرا اکثر مرورگرها (خارج از کروم) هنوز پشتیبانی کاملی از View Transitions ارائه نکرده اند.
راه اندازی پشتیبانی رسمی در Astro
Astro پشتیبانی آزمایشی View Transitions را در Astro 2.9 منتشر کرد. پاسخ بلافاصله مثبت بود. توسعه‌دهندگان شروع به اشتراک‌گذاری نسخه‌های نمایشی باورنکردنی از موارد استفاده مختلف کردند و در برخی موارد حتی همه آنها را برای تولید ارسال کردند.
مشاهده نسخه نمایشی: زنده ، منبع
Astro 3.0، پشتیبانی را نهایی می کند و API جدید View Transitions را برای همه حذف می کند. این APIهای جدید اکنون آماده هستند تا شما به صورت آزمایشی یا یکباره آن را بپذیرید.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
یکی از مزایای غیرمنتظره تراز کردن Astro با API های پلتفرم، توانایی آزمایش ساختن ویژگی های جدید در بالای API بومی View Transitions است. به عنوان مثال، دستورالعمل جدید Astro transition:persist به هر عنصری اجازه می‌دهد در یک پیمایش تمام صفحه باقی بماند. این به عناصری با عمر طولانی مانند پخش‌کننده‌های صوتی و تصویری پایدار کمک می‌کند، چیزی که قبلاً فقط در SPAهای سنگین جاوا اسکریپت امکان‌پذیر بود.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
مشاهده نسخه نمایشی: زنده ، منبع
Astro همچنین رایگان است تا View Transitions را برای توسعه‌دهنده ارگونومیک‌تر کند. به عنوان مثال، تیم قبلاً پشتیبانی از انیمیشن های سفارشی رو به جلو/عقب و انیمیشن های HTML پویا را اضافه کرده است. انجام هر دوی این ویژگی ها به تنهایی با API های سطح پایین دشوار است، اما در Astro عملاً بدون دردسر هستند.
این ویژگی‌ها در حال حاضر فقط در Astro وجود دارد، اما تیم Astro امیدوار است که تجربیات خود را به نویسندگان مشخصات و گروه‌های کاری برای بهبودهای احتمالی مرورگر در آینده بازگرداند. به عنوان مثال، با نظارت دقیق یک پیشنهاد برای سهولت در اشتراک گذاری انیمیشن ها در CSS.
بعدش چی پیش میاد؟
آینده برای View Transitions در وب روشن است. Astro، Nuxt و HTMX همگی درجاتی از پشتیبانی را ارسال کرده‌اند و بسیاری دیگر ابراز علاقه کرده‌اند.
تیم Chrome از پشتیبانی بومی View Transitions Astro هیجان زده است. این یک گام بزرگ برای توسعه وب است که تجربه کاربر روان تر و پویا را فراهم می کند. توسعه دهندگان، ما شما را تشویق می کنیم که در Astro 3.0 وارد View Transitions شوید. چه در حال ایجاد صفحات فرود جدید یا ارتقاء سایت های موجود باشید، این پیشرفت ها تغییر دهنده بازی هستند. View Transitions به پر کردن شکاف بین آنچه با SPA و MPA ممکن بود کمک کرد. Chrome مایل است از شما بشنود که آیا شکاف‌های اضافی در پشتیبانی از SPA و/یا MPA وجود دارد یا خیر. برای بحث بیشتر در مورد مخزن View Transitions WICG GitHub آزادانه نظر بدهید.
ما در حال حاضر از دموها و برنامه های نوآورانه ای که دیده ایم الهام گرفته ایم و مشتاقیم که بیشتر ببینیم. کار شما با View Transitions در حال شکل دادن به آینده وب است. View Transitions را در Astro امتحان کنید، کارتان را به اشتراک بگذارید، و بیایید این سفر را با هم ادامه دهیم.