در منظرهی به سرعت در حال تحول توسعه فرانتاند، تجربه کاربری در اولویت است. کاربران انتظار دارند برنامهها واکنشگرا و روان باشند و اغلب رفتار بومی اپلیکیشنهای موبایل را تقلید کنند. در گذشته، دستیابی به انتقالهای بینقص بین نمایها یا صفحات مختلف، نیازمند کتابخانههای جاوااسکریپت پیچیده یا انیمیشنهای کیفریم CSS نازل بود. با این حال، معرفی CSS View Transitions API نحوه مدیریت این تغییرات را متحول کرده و راهحلی قدرتمند و بومی ارائه میدهد که هم از نظر عملکردی کارآمد است و هم پیادهسازی آن آسان است.
API ترنزیشنهای نمای چیست؟
API ترنزیشنهای نمای یک ویژگی بومی مرورگر است که برای فعالسازی انیمیشنهای روان هنگام تغییرات DOM طراحی شده است. برخلاف ترنزیشنهای CSS سنتی که تنها ویژگیهای یک عنصر واحد (مانند شفافیت یا تبدیل) را انیمیشن میدهند، این API وضعیت بصری کامل سند را قبل و بعد از یک تغییر ثبت میکند و به مرورگر اجازه میدهد تا به طور خودکار بین آن دو وضعیت انیمیشن ایجاد کند.
این ویژگی به ویژه برای موارد زیر مفید است:
- ناوبری بین صفحات (اپلیکیشنهای تکصفحهای).
- تغییر وضعیت اجزای رابط کاربری (مثلاً بزرگنمایی یک کارت برای نمایش تمام صفحه).
- بهروزرسانی محتوا به صورت پویا بدون پرشهای ناگهانی.
استفاده و پیادهسازی پایه
پیادهسازی ترنزیشنهای نمای به طور شگفتانگیزی ساده است. روش اصلی document.startViewTransition() است. این روش یک تابع کالبک را میپذیرد که منطق بهروزرسانی DOM را در خود دارد. مرورگر به طور خودکار یک عکس فوری از DOM قبل از اجرای کالبک و پس از اتمام آن میگیرد و سپس بین این دو عکس فوری انیمیشن ایجاد میکند.
در اینجا یک مثال پایه برای انتقال بین دو نمای مختلف آورده شده است:
document.querySelector('#toggle-button').addEventListener('click', () => {
// شروع ترنزیشن نمای
document.startViewTransition(() => {
// تغییر کلاسی که محتوا را تغییر میدهد
document.querySelector('#container').classList.toggle('expanded');
// هرگونه بهروزرسانی دیگر DOM در اینجا انیمیشن خواهد شد
const content = document.querySelector('#content');
content.textContent = content.textContent === 'Hello' ? 'Goodbye' : 'Hello';
});
});در این مثال، مرورگر وضعیت قبل از تغییر کلاس و تغییر متن را ثبت میکند و سپس به طور روان بین حالت اولیه و نهایی میانیابی (interpolate) میکند.
سفارشیسازی سبکهای ترنزیشن
یکی از قدرتمندترین ویژگیهای API، توانایی سفارشیسازی نحوه انتقال عناصر خاص است. میتوانید از شبهعنصر ::view-transition برای اعمال سبکهای سفارشی، مانند محو شدن، مقیاسدهی یا تغییر شکل (morphing) استفاده کنید.
برای مثال، برای ایجاد یک افکت محو شدن متقاطع ساده برای تمام ترنزیشنهای نمای، میتوانید از CSS زیر استفاده کنید:
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.5s;
mix-blend-mode: normal;
}
/* اختیاری: افزودن ترنزیشن خاص برای عنصری با کلاس 'hero' */
::view-transition-old(hero) {
animation-name: fade-out;
}
::view-transition-new(hero) {
animation-name: fade-in;
}شما همچنین میتوانید کیفریمهای سفارشی برای افکتهای تغییر شکل پیچیدهتر تعریف کنید، اگرچه پشتیبانی مرورگرها برای تغییر شکل خودکار تصاویر هنوز در حال تکمیل است.
مدیریت اپلیکیشنهای تکصفحهای (SPAs)
در اپلیکیشنهای تکصفحهای، تغییرات مسیر اغلب شامل جابجایی بخشهای کاملی از DOM است. API ترنزیشنهای نمای در اینجا درخشش میکند زیرا میتواند این جابجاییها را بدون نیاز به بارگذاری مجدد کامل صفحه به صورت بینقص مدیریت کند. هنگام پیادهسازی این مورد در یک روتر (مانند React Router یا Vue Router)، شما فقط منطق تغییر مسیر را در داخل document.startViewTransition() قرار میدهید.
نکته مهم این است که برای بهترین تجربه، عناصر در نمای «قدیمی» و «جدید» باید دارای ویژگیهای view-transition-name مطابقتدار باشند اگر میخواهید مرورگر آنها را به طور خاص تغییر شکل دهد، نه اینکه فقط محو یا لغزش شوند.
...
...
پشتیبانی مرورگر و بهترین شیوهها
اگرچه API ترنزیشنهای نمای در مرورگرهای مبتنی بر کروم (کروم، اج، اپرا) پشتیبانی میشود و در حال ورود به فایرفاکس و سافاری است، اما استفاده از تشخیص ویژگی (feature detection) حیاتی است. همیشه کد خود را در یک بررسی شرطی قرار دهید:
if (document.startViewTransition) {
document.startViewTransition(() => {
// بهروزرسانی DOM
});
} else {
// منطق جایگزین یا بدون انیمیشن
}علاوه بر این، به عملکرد توجه داشته باشید. درختهای بزرگ DOM یا سبکهای پیچیده میتوانند بر روانی ترنزیشنها تأثیر بگذارند. ترنزیشنهای خود را سبک نگه دارید و روی دستگاههای مختلف آزمایش کنید.
نتیجهگیری
API ترنزیشنهای نمای CSS جهش قابل توجهی در قابلیتهای انیمیشن وب محسوب میشود. با واگذار کردن کارهای سنگین به مرورگر، توسعهدهندگان میتوانند با حداقل کد، انیمیشنهای باکیفیت و با عملکرد بالا ایجاد کنند. با گسترش مستمر پشتیبانی مرورگرها، به کارگیری این API به یک بهترین شیوه برای ارائه تجربههای کاربری مدرن و بومی در وب تبدیل خواهد شد. امروزه با ترنزیشنهای ساده شروع به آزمایش کنید و به تدریج افکتهای تغییر شکل پیچیدهتر را برای ارتقای پروژههای فرانتاند خود ادغام کنید.