قابلیت View Transitions API به صورت پایدار در مرورگرها فعال شد
0 1
توسط تیم طراحی سایت برفانو تازه های وب 6 جولای 2026

🎬 View Transitions API; تحولی در انیمیشن‌های بین صفحات وب

پس از یک دوره طولانی آزمایش در مرورگر کروم، View Transitions API (نسخه Cross-Document) سرانجام به صورت پایدار در دسترس توسعه‌دهندگان قرار گرفت. این API که ابتدا در نسخه Single-Page App (SPA) معرفی شده بود، اکنون برای سایت‌های سنتی Multi-Page نیز قابل استفاده است.

این API چه کاری انجام می‌دهد؟

تا پیش از این، انتقال بین صفحات وب همیشه به صورت ناگهانی (Flash) و بدون هیچ انیمیشنی بود. View Transitions API به توسعه‌دهندگان اجازه می‌دهد با چند خط CSS ساده، بین دو صفحه انیمیشن‌های روان و حرفه‌ای ایجاد کنند. برای مثال:

  • تصویر یک محصول از صفحه محصولات، هنگام کلیک به آرامی به سمت صفحه جزئیات حرکت کند
  • محتوای قدیمی محو شود و محتوای جدید با یک انیمیشن ظریف ظاهر شود
  • پس‌زمینه و هدر صفحه بدون قطع شدن، از حالتی به حالت دیگر تغییر کند

چرا مهم است؟

این قابلیت تجربه کاربری (UX) وبسایت‌ها را به شدت بهبود می‌بخشد و حس یک اپلیکیشن بومی (Native App) را به کاربر القا می‌کند. مهم‌تر اینکه پیاده‌سازی آن فوق‌العاده ساده است:

css

 
@view-transition {
navigation: auto;
}

 

/* فقط با این دو خط ساده، تمام صفحات شما با انیمیشن محو شدن (Fade) جابه‌جا می‌شوند */
::view-transition-old(root) {
animation: fade-out 0.5s ease-in;
}
::view-transition-new(root) {
animation: fade-in 0.5s ease-in;
}

 

پشتیبانی مرورگرها:
این API در حال حاضر به صورت کامل در Google Chrome، Edge و به صورت آزمایشی در Firefox و Safari پشتیبانی می‌شود.

📌 منبع:
developer.chrome.com / web.dev — “View Transitions API: Multi-Page Applications”

تیم طراحی سایت برفانو / درباره نویسنده
پست های بیشتر توسط تیم طراحی سایت برفانو

نظر بگذارید