ارتقاء تجربه کاربری: تسلط بر CSS @view-transition برای انیمیشن‌های ناوبری

در چشم‌انداز همواره در حال تحول توسعه وب، تجربه کاربری (UX) حرف اول را می‌زند. یک تجربه ناوبری یکپارچه و بصری می‌تواند به طور قابل توجهی بر تعامل کاربر و رضایت کلی او تأثیر بگذارد. با CSS @view-transition آشنا شوید، ابزاری قدرتمند که به توسعه‌دهندگان اجازه می‌دهد تا انتقال‌های بصری جذاب و کارآمدی بین حالت‌های مختلف یک برنامه وب ایجاد کرده و سفر کاربر را بهبود بخشند.

CSS View Transitions چه هستند؟

CSS View Transitions یک راه اعلانی (declarative) برای انیمیشن دادن به تغییرات بین دو حالت از DOM ارائه می‌دهند. برخلاف ترنزیشن‌های سنتی CSS یا انیمیشن‌های مبتنی بر جاوا اسکریپت، view transitionها وظیفه پیچیده ثبت وضعیت صفحه قبل و بعد از یک تغییر را بر عهده گرفته و سپس به نرمی بین آن‌ها انیمیشن ایجاد می‌کنند. این امر منجر به یک انتقال روان‌تر و طبیعی‌تر می‌شود، از پرش‌های ناگهانی جلوگیری کرده و عملکرد درک شده وب‌سایت شما را بهبود می‌بخشد.

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

چرا از View Transitions استفاده کنیم؟

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

پیاده‌سازی اولیه View Transitions

پیاده‌سازی view transitions در CSS شامل چند مرحله کلیدی است:

1. فعال‌سازی View Transitions: در جاوا اسکریپت، شما یک view transition را با استفاده از API document.startViewTransition() فعال می‌کنید.
2. تعریف استایل‌های ترنزیشن (اختیاری): شما می‌توانید ظاهر ترنزیشن را با استفاده از CSS شخصی‌سازی کنید.

راه‌انداز (Trigger) جاوا اسکریپت

هسته استفاده از view transitions، تابع document.startViewTransition() است. این تابع یک callback به عنوان آرگومان می‌گیرد. این callback باید DOM را به حالت جدید به‌روزرسانی کند. مرورگر بقیه کار را انجام می‌دهد، حالت‌های "قدیم" و "جدید" را ثبت کرده و بین آن‌ها انیمیشن ایجاد می‌کند.

            
  function navigate(newContent) {
    document.startViewTransition(() => {
      // Update the DOM with the new content
      document.querySelector('#content').innerHTML = newContent;
    });
  }

  // Example Usage:
  document.getElementById('link-to-page-2').addEventListener('click', (event) => {
    event.preventDefault();
    navigate('
This is the content of Page 2!
');
  });
  
            

              
                Copy
              
            
          

در این مثال، کلیک بر روی لینکی با شناسه 'link-to-page-2' تابع navigate را فعال می‌کند. این تابع document.startViewTransition() را فراخوانی کرده و یک callback ارائه می‌دهد که محتوای عنصری با شناسه 'content' را به‌روزرسانی می‌کند.

شخصی‌سازی اولیه با CSS

به طور پیش‌فرض، view transitions بین محتوای قدیم و جدید یک fade (محو شدن) ایجاد می‌کند. با این حال، شما می‌توانید ترنزیشن را با استفاده از CSS شخصی‌سازی کنید. در اینجا برخی از ویژگی‌های کلیدی CSS که می‌توانید استفاده کنید، آورده شده است:

• view-transition-name: یک نام به یک عنصر اختصاص می‌دهد و به شما امکان می‌دهد آن را به طور جداگانه در طول ترنزیشن انیمیت کنید.
• transition: ترنزیشن‌های استاندارد CSS را به عناصر view transition اعمال می‌کند.

            
  #content {
    view-transition-name: content-area;
  }

  ::view-transition-old(content-area),
  ::view-transition-new(content-area) {
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
  }

  ::view-transition-old(content-area) {
    transform: translateX(0);
  }

  ::view-transition-new(content-area) {
    transform: translateX(0);
  }
  
            

              
                Copy
              
            
          

در این مثال:

• view-transition-name: content-area; نام "content-area" را به عنصر #content اختصاص می‌دهد. این به مرورگر می‌گوید که در طول view transition با این عنصر به طور ویژه رفتار کند.
• شبه‌عناصر (pseudo-elements) ::view-transition-old(content-area) و ::view-transition-new(content-area) به ترتیب نسخه‌های قدیم و جدید عنصر را در طول ترنزیشن انتخاب می‌کنند.
• سپس ما یک ترنزیشن به این عناصر اعمال می‌کنیم که باعث می‌شود در طول ترنزیشن محو و جابجا شوند.

تکنیک‌های پیشرفته View Transition

در حالی که پیاده‌سازی اولیه یک پایه محکم فراهم می‌کند، شما می‌توانید از تکنیک‌های پیشرفته‌تر برای ایجاد view transitionهای واقعاً خیره‌کننده و جذاب استفاده کنید.

انیمیشن دادن به عناصر مجزا

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

            
  <div id="container">
    <img id="image1" src="image1.jpg" alt="Image 1" style="view-transition-name: image1;">
    <h2 id="title1" style="view-transition-name: title1;">Title 1</h2>
    <p id="description1" style="view-transition-name: description1;">Description 1</p>
  </div>
  
            

              
                Copy
              
            
          

            
  ::view-transition-old(image1) {
    transform: scale(1.2);
    opacity: 0;
  }

  ::view-transition-new(image1) {
    transform: scale(1);
    opacity: 1;
  }

  ::view-transition-old(title1) {
    transform: translateY(-20px);
    opacity: 0;
  }

  ::view-transition-new(title1) {
    transform: translateY(0);
    opacity: 1;
  }
  
            

              
                Copy
              
            
          

این مثال نشان می‌دهد که چگونه یک تصویر و یک عنوان را به طور مستقل انیمیت کنیم. تصویر قدیمی بزرگ شده و محو می‌شود، در حالی که تصویر جدید کوچک شده و ظاهر می‌شود. عنوان قدیمی به بالا حرکت کرده و محو می‌شود، در حالی که عنوان جدید به پایین حرکت کرده و ظاهر می‌شود. این یک ترنزیشن پویا و جذاب بصری ایجاد می‌کند.

ترنزیشن‌های عناصر مشترک (Shared Element)

ترنزیشن‌های عناصر مشترک شامل انیمیشن دادن به یک عنصر واحد است که هم در حالت "قدیم" و هم در حالت "جدید" ظاهر می‌شود. این امر به ویژه برای ایجاد حس تداوم هنگام ناوبری بین صفحات یا بخش‌های مختلف وب‌سایت شما مفید است.

به عنوان مثال، یک صفحه لیست محصولات و یک صفحه جزئیات محصول را تصور کنید. تصویر محصول می‌تواند یک عنصر مشترک باشد که به طور یکپارچه از صفحه لیست به صفحه جزئیات منتقل می‌شود. این یک ارتباط بصری قوی بین دو صفحه ایجاد می‌کند و درک کاربر از رابطه بین آن‌ها را افزایش می‌دهد.

ترنزیشن‌های بین-مبدأ (Cross-Origin)

View transitions حتی می‌توانند بین مبدأهای (دامنه‌های) مختلف نیز کار کنند، به شرطی که هدرهای CORS لازم به درستی پیکربندی شده باشند. این امر امکان ایجاد انتقال‌های یکپارچه بین وب‌سایت‌ها یا برنامه‌های وب مختلف را فراهم می‌کند، تا زمانی که تحت کنترل شما باشند و بتوانید تنظیمات CORS را مدیریت کنید.

بهترین شیوه‌ها برای استفاده از View Transitions

در حالی که view transitions راهی قدرتمند برای بهبود تجربه کاربری ارائه می‌دهند، مهم است که از آن‌ها به طور معقول استفاده کرده و از بهترین شیوه‌ها پیروی کنید تا از عملکرد بهینه و دسترسی‌پذیری اطمینان حاصل شود.

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

نمونه‌هایی از View Transitions در عمل

در اینجا چند نمونه از چگونگی استفاده از view transitions برای بهبود تجربه کاربری در وب‌سایت شما آورده شده است:

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

مثال ۱: ترنزیشن‌های روان صفحه

یک وب‌سایت وبلاگ را تصور کنید. به جای یک بارگذاری ناگهانی صفحه زمانی که کاربر روی لینک یک پست وبلاگ کلیک می‌کند، یک view transition می‌تواند محتوای جدید را به نرمی از کنار صفحه وارد کند و یک تجربه خواندن همه‌جانبه‌تر و جذاب‌تر ایجاد کند.

مثال ۲: پنجره‌های مودال انیمیشنی

به جای اینکه یک پنجره مودال به طور ناگهانی روی صفحه ظاهر شود، یک view transition می‌تواند آن را به نرمی از پس‌زمینه محو و ظاهر کند، توجه کاربر را جلب کرده و تجربه بصری شیک‌تری ارائه دهد. به همین ترتیب، هنگام بستن مودال، می‌تواند به نرمی محو شود و کاربر را به آرامی به محتوای اصلی بازگرداند.

مثال ۳: ترنزیشن‌های جذاب گالری تصاویر

برای یک پورتفولیو آنلاین یا یک وب‌سایت تجارت الکترونیک، گالری‌های تصاویر ضروری هستند. View transitions می‌توانند با ایجاد انتقال‌های روان و پویا بین تصاویر، تجربه مرور را ارتقا دهند. به عنوان مثال، تصویر فعلی می‌تواند به نرمی کوچک شود در حالی که تصویر بعدی بزرگ می‌شود و حسی از عمق و حرکت ایجاد می‌کند.

سازگاری مرورگر و Polyfillها

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

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

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

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

• ترجیح کاهش حرکت (Reduced Motion): به ترجیح کاربر برای کاهش حرکت احترام بگذارید. بسیاری از سیستم‌عامل‌ها و مرورگرها به کاربران اجازه می‌دهند انیمیشن‌ها را برای کاهش حواس‌پرتی یا بیماری حرکت غیرفعال کنند. از مدیا کوئری CSS prefers-reduced-motion برای تشخیص این ترجیح و غیرفعال کردن یا کاهش شدت view transitionهای خود استفاده کنید.
• ناوبری با صفحه‌کلید: اطمینان حاصل کنید که تمام عناصر تعاملی در وب‌سایت شما از طریق ناوبری با صفحه‌کلید قابل دسترس هستند. View transitions نباید با ترتیب فوکوس صفحه‌کلید تداخل داشته باشند یا ناوبری کاربران با استفاده از صفحه‌کلید را دشوار کنند.
• سازگاری با صفحه‌خوان‌ها (Screen Readers): اطمینان حاصل کنید که view transitionهای شما با صفحه‌خوان‌ها سازگار هستند. برای هر محتوای متحرک، جایگزین‌های متنی توصیفی ارائه دهید تا اطمینان حاصل شود که کاربران کم‌بینا همچنان می‌توانند زمینه ترنزیشن‌ها را درک کنند.
• کنتراست کافی: اطمینان حاصل کنید که کنتراست کافی بین رنگ متن و پس‌زمینه، به ویژه در طول ترنزیشن، وجود دارد. این به کاربران کم‌بینا کمک می‌کند تا محتوا را به وضوح ببینند.

آینده View Transitions

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

برخی از تحولات بالقوه آینده عبارتند از:

• گزینه‌های انیمیشن پیشرفته‌تر: انتظار می‌رود گزینه‌های بیشتری برای شخصی‌سازی ظاهر و رفتار view transitions، مانند پشتیبانی از توابع easing سفارشی، انیمیشن‌های پلکانی (staggered) و افکت‌های ترنزیشن پیچیده‌تر، ببینیم.
• ادغام با کامپوننت‌های وب (Web Components): View transitions به احتمال زیاد به طور فزاینده‌ای با کامپوننت‌های وب ادغام خواهند شد و به توسعه‌دهندگان اجازه می‌دهند تا عناصر رابط کاربری قابل استفاده مجدد و کپسوله‌شده با افکت‌های ترنزیشن داخلی ایجاد کنند.
• پشتیبانی از رندر سمت سرور (Server-Side Rendering): با رواج بیشتر رندر سمت سرور، می‌توان انتظار داشت که شاهد پشتیبانی از view transitions در سمت سرور باشیم که امکان بارگذاری‌های اولیه صفحه روان‌تر و کارآمدتری را فراهم می‌کند.

نتیجه‌گیری

CSS @view-transition یک تغییردهنده بازی برای توسعه‌دهندگان وب است که به دنبال ارتقاء تجربه کاربری از طریق انیمیشن‌های ناوبری یکپارچه و جذاب هستند. با درک اصول، تکنیک‌ها و بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید پتانسیل کامل view transitions را آزاد کرده و وب‌سایت‌هایی ایجاد کنید که هم از نظر بصری خیره‌کننده و هم کارآمد باشند. این ابزار قدرتمند را بپذیرید و وب‌سایت خود را به یک تجربه واقعاً همه‌جانبه و کاربرپسند برای کاربران در سراسر جهان تبدیل کنید.