مدت‌هاست که اپلیکیشن‌های بومی دارای ویژگی‌های بسیاری هستند که ما توسعه‌دهندگان وب فقط می‌توانستیم رویای آنها را داشته باشیم، از یکپارچه‌سازی سخت‌افزار بهتر تا انتقال‌های زیبا و بدون درز صفحه. با این حال، محیط وب در چند سال اخیر به سرعت در حال تغییر و انطباق بوده است و یک تغییر اخیر (در حال حاضر فقط در کروم و اج موجود است) در نهایت به ما اجازه می‌دهد تا چند تغییر صفحه زیبا انجام دهیم. البته من در مورد View Transition API صحبت می کنم.
View Transition API چیست؟
API راهی برای متحرک سازی بین صفحات ارائه می دهد، در حال حاضر فقط با SPA ها کار می کند، اما امکان انتقال به تمام صفحات مبدا یکسان را به موقع می دهد. در خارج از جعبه، انیمیشن یک متقاطع محو ساده است، اما با استفاده از CSS یا جاوا اسکریپت می‌توانید انیمیشن‌های پیچیده‌تر و جالب‌تری بنویسید. اینها شامل عناصری است که برای اشغال فضاهای جدید یا محتوایی که وارد/خروج از صفحه نمایش با تغییر شکل می شوند، مانند نسخه نمایشی من، حرکت می کنند.
API با JS (برای SPA) فراخوانی می شود و از آن استفاده می کند startViewTransition تابع.
View Transitions API چگونه کار می کند؟
افکت انتقال با گرفتن یک عکس فوری، نوعی تصویر، از سایت در وضعیت فعلی آن و یک عکس فوری دیگر از صفحه ورودی و سپس اجازه دادن به انیمیشن ها بین آنها به دست می آید. محو شدن ساده و انتقال کل صفحه (مانند مثال من) نسبتاً ساده است، اما با تقسیم کردن عکس فوری به لایه‌های نام‌گذاری شده و متحرک کردن آنها به طور جداگانه، می‌توان به ظاهر پیچیده‌تر دست یافت. پیشنهاد می کنم به این سایت دمو نگاهی بیندازید جیک آرچیبالد برای دریافت ایده ای از آنچه ممکن است.
آیا می توانم از Transition API در پروژه خود استفاده کنم؟
کاملا! ولی…
در زمان نوشتن، API فقط در کروم کار می کند و حتی در آنجا نیز فقط جزئی (فقط SPA) پشتیبانی می شود. در حال حاضر می‌گویم آزمایش کنید و برای فرود این ویژگی آماده شوید و حتی در پروژه‌هایی که محیط را کنترل می‌کنید، مانند الکترون، از آن استفاده کنید.
مطمئناً می‌توانید بررسی کنید که آیا API پشتیبانی می‌شود یا نه، از یک نسخه بازگشتی استفاده کنید، اما من واقعاً طرفدار انجام بررسی‌های جاوا اسکریپت برای مرورگرهای قدیمی نیستم.
// Check to see if API is supported
if (document.startViewTransition) {
// start transition
const transition = document.startViewTransition(() => navigate(url));
// when transition start run animation
transition.ready.then(() => {
document.documentElement.animate(
// logic for animation
);
});
} else {
// fallback for old browser
navigate(url);
}
هنگامی که پشتیبانی کامل از صفحه به صفحه حداقل در یک مرورگر قرار می گیرد، فروش بسیار آسان تر خواهد بود، کمی CSS که توسط مرورگرهای قدیمی نادیده گرفته می شود، اما تا آن زمان…
فین
از اینکه استانداردهای جدید وب را با من خواندید و کاوش کردید سپاسگزارم. با نزدیک‌تر شدن و نزدیک‌تر شدن به وب احساس می‌کنیم که یک شهروند برنامه درجه یک هستیم، تغییرات کوچکی مانند این، راه طولانی‌ای برای ایجاد حس بومی و روان در PWA و سایت‌ها خواهد داشت.
از مطالعه شما بسیار متشکریم. اگر می‌خواهید خارج از برنامه‌نویس با من ارتباط برقرار کنید، اینجا هستم توییتر و لینکدین بیا سلام کنیم 😊.
