ناوبری با CSS View Transition: ساخت انتقالات یکپارچه بین صفحات

در چشم‌انداز توسعه وب امروزی، تجربه کاربری (UX) حرف اول را می‌زند. جنبه کلیدی یک UX مثبت، ایجاد ناوبری روان و شهودی است. CSS View Transitions روشی قدرتمند و نسبتاً جدید برای بهبود ناوبری با افزودن انیمیشن‌های جذاب بصری بین انتقالات صفحات ارائه می‌دهد. این پست وبلاگ به جزئیات CSS View Transitions می‌پردازد و قابلیت‌ها، پیاده‌سازی، سازگاری مرورگر و موارد استفاده بالقوه آن را بررسی می‌کند.

CSS View Transitions چیست؟

CSS View Transitions روشی اعلانی برای انیمیشن‌سازی انتقال بین دو وضعیت در یک اپلیکیشن وب فراهم می‌کند که معمولاً توسط رویدادهای ناوبری فعال می‌شود. به جای تغییرات ناگهانی، عناصر به آرامی تغییر شکل می‌دهند، محو می‌شوند، می‌لغزند یا انیمیشن‌های دیگری را اجرا می‌کنند و تجربه‌ای روان‌تر و جذاب‌تر برای کاربر ایجاد می‌کنند. این ویژگی به ویژه در اپلیکیشن‌های تک‌صفحه‌ای (SPA) یا اپلیکیشن‌های وبی که از به‌روزرسانی محتوای پویا استفاده می‌کنند، مؤثر است.

برخلاف تکنیک‌های قدیمی‌تر انتقال مبتنی بر جاوا اسکریپت، CSS View Transitions از موتور رندر مرورگر برای عملکرد بهینه استفاده می‌کند. این ویژگی به توسعه‌دهندگان اجازه می‌دهد تا این انتقالات را مستقیماً در CSS تعریف کنند که مدیریت و نگهداری آن‌ها را آسان‌تر می‌کند.

مزایای استفاده از CSS View Transitions

• تجربه کاربری بهبودیافته: انتقالات روان زمان بارگذاری درک‌شده را کاهش می‌دهند و حسی حرفه‌ای‌تر و صیقلی‌تر ایجاد می‌کنند. این امر منجر به افزایش رضایت و تعامل کاربر می‌شود.
• عملکرد درک‌شده بهبودیافته: حتی اگر زمان بارگذاری واقعی یکسان باشد، انیمیشن‌ها می‌توانند باعث شوند انتقال سریع‌تر به نظر برسد و عملکرد درک‌شده اپلیکیشن را بهبود بخشند.
• سینتکس اعلانی: تعریف انتقالات در CSS کد را در مقایسه با راه‌حل‌های پیچیده جاوا اسکریپت، تمیزتر، خواناتر و نگهداری آن را آسان‌تر می‌کند.
• سازگاری بین مرورگرها: مرورگرهای مدرن به طور فزاینده‌ای از CSS View Transitions پشتیبانی می‌کنند. در ادامه در مورد سازگاری و بهبود تدریجی بحث خواهیم کرد.
• دسترسی‌پذیری: با طراحی دقیق، انتقالات می‌توانند با هدایت بصری کاربران در جریان اپلیکیشن، دسترسی‌پذیری را بهبود بخشند. با این حال، باید از انیمیشن‌های بیش از حد یا گیج‌کننده اجتناب کرد زیرا می‌توانند بر کاربرانی که دارای اختلالات دهلیزی هستند تأثیر منفی بگذارند.

CSS View Transitions چگونه کار می‌کند

اصل اساسی شامل ثبت وضعیت‌های 'قدیمی' و 'جدید' DOM و انیمیشن‌سازی تفاوت‌های بین آن‌هاست. مرورگر به طور خودکار پیچیدگی‌های ایجاد فریم‌های میانی و اعمال انیمیشن‌ها را مدیریت می‌کند.

ویژگی کلیدی CSS، view-transition-name است. این ویژگی عناصری را که باید در انتقال شرکت کنند، شناسایی می‌کند. هنگامی که DOM تغییر می‌کند و عناصری با همان view-transition-name در هر دو وضعیت 'قدیمی' و 'جدید' وجود دارند، مرورگر تغییرات بین آن‌ها را انیمیشن‌سازی می‌کند.

در اینجا یک تفکیک ساده از فرآیند آورده شده است:

1. شناسایی عناصر در حال انتقال: ویژگی view-transition-name را به عناصری که می‌خواهید در طول انتقال انیمیشن‌سازی کنید، اختصاص دهید. مقدار آن باید یک شناسه منحصر به فرد برای هر عنصر درگیر باشد.
2. فعال کردن انتقال: این کار معمولاً از طریق ناوبری (مانند کلیک روی یک لینک) یا یک به‌روزرسانی DOM توسط جاوا اسکریپت انجام می‌شود.
3. مرورگر کنترل را به دست می‌گیرد: مرورگر وضعیت‌های قبل و بعد DOM را ثبت می‌کند.
4. انیمیشن: مرورگر به طور خودکار عناصری با مقادیر view-transition-name منطبق را انیمیشن‌سازی می‌کند و آن‌ها را به آرامی بین موقعیت‌ها، اندازه‌ها و استایل‌های قدیمی و جدیدشان منتقل می‌کند.

پیاده‌سازی CSS View Transitions: یک مثال عملی

بیایید با یک مثال ساده از انتقال بین دو صفحه محصول، موضوع را روشن کنیم. ما یک ساختار HTML پایه با تصاویر و توضیحات محصول را فرض می‌کنیم.

ساختار HTML (ساده‌شده)

            
<div class="product-container">
 <img src="product1.jpg" alt="Product 1" class="product-image" style="view-transition-name: product-image;">
 <h2 class="product-title" style="view-transition-name: product-title;">Product 1 Name</h2>
 <p class="product-description" style="view-transition-name: product-description;">A brief description of product 1.</p>
 <a href="product2.html">View Product 2</a>
</div>

            

              
                Copy
              
            
          

و به طور مشابه برای `product2.html`، با منبع تصویر، عنوان و توضیحات متفاوت. نکته کلیدی این است که مقادیر view-transition-name برای عناصر متناظر در هر دو صفحه یکسان باقی می‌ماند.

استایل‌دهی CSS (پایه)

            
.product-container {
 width: 300px;
 margin: 20px;
 padding: 10px;
 border: 1px solid #ccc;
}

.product-image {
 width: 100%;
 height: auto;
}

            

              
                Copy
              
            
          

فعال کردن انتقال با جاوا اسکریپت

در حالی که CSS View Transitions عمدتاً اعلانی هستند، اغلب برای شروع انتقال به جاوا اسکریپت نیاز است، به خصوص در SPA‌ها یا زمانی که محتوا به صورت پویا به‌روز می‌شود. تابع `document.startViewTransition()` API اصلی برای این کار است. بیایید تگ `<a>` را تغییر دهیم تا از جاوا اسکریپت برای مدیریت انتقال صفحه استفاده کند.

            
<a href="product2.html" onclick="navigateTo(event, 'product2.html')">View Product 2</a>

            

              
                Copy
              
            
          

و در اینجا تابع جاوا اسکریپت آمده است:

            
function navigateTo(event, url) {
 event.preventDefault(); // Prevent default link behavior

 document.startViewTransition(() => {
 // Update the DOM with the new content (e.g., using fetch)
 return fetch(url)
 .then(response => response.text())
 .then(html => {
 //Replace content of current page
 document.body.innerHTML = html;
 });
 });
}

            

              
                Copy
              
            
          

توضیح:

1. `event.preventDefault()`: این از رفتار پیش‌فرض مرورگر برای ناوبری مستقیم به URL جدید جلوگیری می‌کند.
2. `document.startViewTransition(() => { ... })`: این انتقال دید را آغاز می‌کند. تابعی که به `startViewTransition` پاس داده می‌شود، *بعد از* آماده شدن انتقال اما *قبل از* به‌روزرسانی DOM اجرا می‌شود. اینجاست که شما تغییرات واقعی را در DOM ایجاد می‌کنید.
3. `fetch(url)`: این محتوای صفحه جدید (مثلاً "product2.html") را واکشی می‌کند.
4. `.then(response => response.text())`: این محتوای HTML را از پاسخ استخراج می‌کند.
5. `.then(html => { document.body.innerHTML = html; })`: این DOM را با محتوای HTML جدید به‌روز می‌کند.

مهم: برای اینکه این کار به طور یکپارچه عمل کند، کل `body` فایل `product2.html` باید به گونه‌ای ساختار یافته باشد که مرورگر بتواند عناصر در حال انتقال را شناسایی کند. این شامل استفاده صحیح از `view-transition-name` است. یک رویکرد قوی‌تر این است که به جای جایگزینی کل بدنه، فقط بخش‌های خاصی از صفحه را که در حال تغییر هستند، به‌روز کنید.

سفارشی‌سازی انتقال با CSS

CSS شبه‌عناصری (pseudo-elements) را فراهم می‌کند که به شما امکان می‌دهد ظاهر انتقال را سفارشی کنید. این شبه‌عناصر به طور خودکار توسط مرورگر در طول انتقال دید ایجاد می‌شوند:

• ::view-transition: کل انتقال دید را نشان می‌دهد.
• ::view-transition-group(*): گروهی از عناصر با همان view-transition-name را نشان می‌دهد. `*` با مقدار واقعی view-transition-name جایگزین می‌شود.
• ::view-transition-image-pair(*): جفت تصویر را برای یک view-transition-name خاص نشان می‌دهد. این شامل هر دو تصویر قدیمی و جدید است.
• ::view-transition-old(*): تصویر قدیمی را در طول انتقال نشان می‌دهد.
• ::view-transition-new(*): تصویر جدید را در طول انتقال نشان می‌دهد.

به عنوان مثال، برای افزودن یک افکت محو شدن ساده، می‌توانید از CSS زیر استفاده کنید:

            
::view-transition-old(product-image) {
 animation-duration: 0.5s;
 animation-name: fade-out;
}

::view-transition-new(product-image) {
 animation-duration: 0.5s;
 animation-name: fade-in;
}

@keyframes fade-in {
 from { opacity: 0; }
 to { opacity: 1; }
}

@keyframes fade-out {
 from { opacity: 1; }
 to { opacity: 0; }
}

            

              
                Copy
              
            
          

این مثال یک انیمیشن محو شدن ۰.۵ ثانیه‌ای به تصویر محصول قدیمی و یک انیمیشن ظاهر شدن ۰.۵ ثانیه‌ای به تصویر محصول جدید اضافه می‌کند. شما می‌توانید با انیمیشن‌ها و مدت‌زمان‌های مختلف آزمایش کنید تا به افکت دلخواه خود برسید.

موارد استفاده و تکنیک‌های پیشرفته

انتقالات عناصر مشترک

مثال بالا یک انتقال عنصر مشترک پایه را نشان می‌دهد. ایده اصلی این است که یک عنصر یکسان (که با `view-transition-name` شناسایی می‌شود) در هر دو صفحه وجود داشته باشد و بین وضعیت‌های آن‌ها انیمیشن‌سازی شود. این برای ایجاد حس تداوم بین صفحات بسیار قدرتمند است.

تبدیل‌های کانتینر

تبدیل‌های کانتینر شامل انیمیشن‌سازی موقعیت، اندازه و شکل یک عنصر کانتینر در طول انتقال است. این ویژگی به ویژه برای انتقال بین نماهای لیستی و نماهای جزئیات مفید است.

انیمیشن‌های سفارشی

شما به افکت‌های ساده محو شدن/ظاهر شدن محدود نیستید. می‌توانید از هر ویژگی انیمیشن معتبر CSS برای ایجاد انتقالات پیچیده و سفارشی استفاده کنید. با `transform`، `scale`، `rotate`، `opacity` و سایر ویژگی‌ها آزمایش کنید تا به افکت‌های بصری منحصر به فرد دست یابید.

به‌روزرسانی‌های محتوای پویا

CSS View Transitions به ناوبری‌های کامل صفحه محدود نمی‌شوند. آن‌ها همچنین می‌توانند برای انیمیشن‌سازی به‌روزرسانی‌های بخش‌های خاصی از یک صفحه استفاده شوند. این برای ایجاد رابط‌های کاربری پویا که در آن داده‌ها به طور مکرر تغییر می‌کنند، مفید است.

مدیریت عملیات ناهمزمان

هنگام کار با عملیات ناهمزمان (مانند واکشی داده از یک API)، باید اطمینان حاصل کنید که DOM *در داخل* callback تابع `document.startViewTransition()` به‌روز می‌شود. این تضمین می‌کند که انتقال پس از بارگذاری داده‌ها و آماده شدن محتوای جدید، آغاز می‌شود.

سازگاری مرورگر و بهبود تدریجی

تا اواخر سال ۲۰۲۴، CSS View Transitions از پشتیبانی خوبی در مرورگرهای مدرن مانند Chrome، Edge و Firefox برخوردار است. Safari پشتیبانی آزمایشی دارد که نیاز به فعال‌سازی از طریق تنظیمات دارد. با این حال، مرورگرهای قدیمی‌تر و برخی از مرورگرهای موبایل ممکن است به طور بومی از آن‌ها پشتیبانی نکنند.

بهبود تدریجی کلیدی است: بسیار مهم است که CSS View Transitions را به عنوان یک بهبود تدریجی پیاده‌سازی کنید. این بدان معناست که اپلیکیشن باید حتی اگر مرورگر از view transitions پشتیبانی نکند، به درستی کار کند. کاربران در مرورگرهای قدیمی‌تر به سادگی یک انتقال صفحه استاندارد و بدون انیمیشن را تجربه خواهند کرد.

تشخیص ویژگی: شما می‌توانید از جاوا اسکریپت برای تشخیص اینکه آیا مرورگر از view transitions پشتیبانی می‌کند یا نه، استفاده کنید و به صورت شرطی منطق انتقال را اعمال کنید. به عنوان مثال:

            
if (document.startViewTransition) {
 // Use CSS View Transitions
} else {
 // Fallback to a standard navigation
 window.location.href = url;
}

            

              
                Copy
              
            
          

ملاحظات دسترسی‌پذیری

در حالی که انیمیشن‌ها می‌توانند تجربه کاربری را بهبود بخشند، در نظر گرفتن دسترسی‌پذیری ضروری است. برخی از کاربران، به ویژه آن‌هایی که دارای اختلالات دهلیزی هستند، ممکن است به انیمیشن‌های بیش از حد یا گیج‌کننده حساس باشند. در اینجا برخی از بهترین شیوه‌های دسترسی‌پذیری آورده شده است:

• انیمیشن‌ها را کوتاه و ظریف نگه دارید: از انیمیشن‌های طولانی و پیچیده که می‌توانند کاربران را سردرگم کنند، خودداری کنید.
• راهی برای غیرفعال کردن انیمیشن‌ها فراهم کنید: به کاربران اجازه دهید انیمیشن‌ها را در تنظیمات اپلیکیشن خاموش کنند. می‌توانید از مدیا کوئری `prefers-reduced-motion` برای تشخیص اینکه آیا کاربر درخواست حرکت کاهش‌یافته را در تنظیمات سیستم عامل خود داده است، استفاده کنید.
• اطمینان حاصل کنید که انیمیشن‌ها اطلاعات حیاتی را منتقل نمی‌کنند: برای انتقال اطلاعات مهم، تنها به انیمیشن‌ها تکیه نکنید. نشانه‌های بصری جایگزین یا توضیحات متنی ارائه دهید.
• با کاربران دارای معلولیت تست کنید: از کاربران دارای معلولیت بازخورد بگیرید تا اطمینان حاصل کنید که انیمیشن‌ها هیچ مشکل دسترسی‌پذیری ایجاد نمی‌کنند.

بهینه‌سازی عملکرد

در حالی که CSS View Transitions به طور کلی عملکرد خوبی دارند، مهم است که آن‌ها را برای جلوگیری از گلوگاه‌های عملکردی بهینه‌سازی کنید. در اینجا چند نکته آورده شده است:

• از شتاب‌دهنده سخت‌افزاری استفاده کنید: اطمینان حاصل کنید که ویژگی‌های انیمیشن‌سازی شده توسط سخت‌افزار شتاب‌دهی می‌شوند (مثلاً استفاده از `transform: translate3d()` به جای `left` و `top`).
• انیمیشن‌ها را ساده نگه دارید: از انیمیشن‌سازی تعداد زیادی عنصر به طور همزمان یا استفاده از انیمیشن‌های بیش از حد پیچیده خودداری کنید.
• تصاویر را بهینه‌سازی کنید: اطمینان حاصل کنید که تصاویر به درستی برای وب بهینه‌سازی شده‌اند (مثلاً با استفاده از فشرده‌سازی و فرمت‌های مناسب).
• انیمیشن‌های خود را پروفایل کنید: از ابزارهای توسعه‌دهنده مرورگر برای پروفایل کردن انیمیشن‌ها و شناسایی هرگونه گلوگاه عملکردی استفاده کنید.

مثال‌ها و موارد استفاده در دنیای واقعی

CSS View Transitions را می‌توان در طیف گسترده‌ای از اپلیکیشن‌های وب استفاده کرد. در اینجا چند نمونه آورده شده است:

• سایت‌های تجارت الکترونیک: انتقالات روان بین لیست محصولات و صفحات جزئیات می‌تواند تجربه خرید جذاب‌تری ایجاد کند.
• وب‌سایت‌های نمونه‌کار: انتقالات انیمیشنی بین صفحات پروژه می‌تواند مهارت‌های یک طراح یا توسعه‌دهنده را به شیوه‌ای جذاب بصری به نمایش بگذارد.
• وب‌سایت‌های خبری: انتقالات ظریف بین مقالات می‌تواند خوانایی و جریان وب‌سایت را بهبود بخشد.
• اپلیکیشن‌های داشبورد: انتقالات انیمیشنی بین بخش‌های مختلف داشبورد می‌تواند حس واضحی از زمینه و جهت‌گیری را فراهم کند.
• اپلیکیشن‌های موبایل (مبتنی بر وب): با انتقالات روان بین صفحات، حسی شبیه به اپلیکیشن‌های بومی در اپلیکیشن‌های موبایل مبتنی بر وب ایجاد کنید. به عنوان مثال، انتقال بین نماهای لیستی و نماهای جزئیات آیتم‌ها.

جایگزین‌های CSS View Transitions

در حالی که CSS View Transitions ابزار قدرتمندی است، رویکردهای جایگزینی برای ایجاد انتقالات صفحه وجود دارد:

• انیمیشن‌های مبتنی بر جاوا اسکریپت: کتابخانه‌هایی مانند GreenSock (GSAP) و Anime.js کنترل دقیق‌تری بر انیمیشن‌ها فراهم می‌کنند. با این حال، آن‌ها اغلب به کد بیشتری نیاز دارند و ممکن است عملکرد کمتری نسبت به CSS View Transitions داشته باشند.
• ترنزیشن‌ها و انیمیشن‌های CSS (بدون View Transitions): شما می‌توانید از ترنزیشن‌ها و انیمیشن‌های استاندارد CSS برای ایجاد انتقالات صفحه پایه استفاده کنید. این رویکرد به طور گسترده‌تری پشتیبانی می‌شود اما انعطاف‌پذیری کمتری نسبت به CSS View Transitions دارد. اغلب شامل مدیریت دستی نام کلاس‌ها و دستکاری‌های DOM است.
• کامپوننت‌های انتقال مخصوص فریم‌ورک: بسیاری از فریم‌ورک‌های فرانت-اند (مانند React، Vue، Angular) کامپوننت‌های انتقال داخلی را ارائه می‌دهند که فرآیند ایجاد انتقالات صفحه را ساده می‌کنند.

بهترین رویکرد به نیازمندی‌های خاص پروژه شما بستگی دارد. CSS View Transitions انتخاب خوبی است زمانی که شما یک راه اعلانی، با عملکرد بالا و نسبتاً ساده برای ایجاد انتقالات صفحه رایج می‌خواهید.

نتیجه‌گیری

CSS View Transitions روشی مدرن و کارآمد برای بهبود تجربه کاربری اپلیکیشن‌های وب با افزودن انتقالات صفحه روان و جذاب ارائه می‌دهد. با درک مفاهیم اصلی، تکنیک‌های پیاده‌سازی و ملاحظات سازگاری مرورگر، توسعه‌دهندگان می‌توانند از این ویژگی قدرتمند برای ایجاد تجربیات وب صیقلی‌تر و شهودی‌تر استفاده کنند. با ادامه رشد پشتیبانی مرورگرها، CSS View Transitions آماده است تا به ابزاری ضروری در جعبه ابزار توسعه‌دهندگان وب مدرن تبدیل شود. به یاد داشته باشید که دسترسی‌پذیری و بهینه‌سازی عملکرد را در اولویت قرار دهید تا اطمینان حاصل کنید که انیمیشن‌های شما به جای کاستن از تجربه کلی کاربر، آن را بهبود می‌بخشند.

منابع بیشتر

• اسناد وب MDN: Document.startViewTransition()
• ماژول CSS View Transitions سطح ۱
• دموی CSS View Transitions