M

MLOG

فارسی

بر API انتقال نمای CSS مسلط شوید تا انتقال صفحات یکپارچه و جذاب بسازید. تجربه کاربری و عملکرد را با انیمیشن‌های روان بهبود بخشید.

ارتقای تجربه کاربری: راهنمای جامع API انتقال نمای CSS

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

API انتقال نمای CSS چیست؟

API انتقال نمای CSS یک روش استاندارد برای انیمیشن‌سازی تغییرات بصری است که هنگام ناوبری بین حالت‌های مختلف در یک اپلیکیشن وب رخ می‌دهد. آن را راهی برای سازماندهی محو شدن‌های تدریجی (fades)، اسلایدها و سایر جلوه‌های بصری هنگام به‌روزرسانی محتوا بر روی صفحه در نظر بگیرید. قبل از این API، توسعه‌دهندگان اغلب برای دستیابی به افکت‌های مشابه به کتابخانه‌های جاوا اسکریپت و انیمیشن‌های پیچیده CSS متکی بودند که می‌توانست دست‌وپاگیر باشد و به مشکلات عملکردی منجر شود. API انتقال نما، رویکردی ساده‌تر و با عملکرد بهتر ارائه می‌دهد.

ایده اصلی پشت این API، ثبت حالت‌های «قبل» و «بعد» DOM (Document Object Model) و سپس انیمیشن‌سازی تفاوت‌های بین آن‌هاست. مرورگر بخش سنگین ایجاد انیمیشن را بر عهده می‌گیرد و توسعه‌دهندگان را از نوشتن کدهای پیچیده انیمیشن به صورت دستی آزاد می‌کند. این نه تنها فرآیند توسعه را ساده می‌کند، بلکه به تضمین انتقال‌های روان‌تر و با عملکرد بهتر نیز کمک می‌کند.

چرا از API انتقال نمای CSS استفاده کنیم؟

چگونه کار می‌کند؟

API انتقال نمای CSS عمدتاً شامل یک تابع جاوا اسکریپت است: `document.startViewTransition()`. این تابع یک callback به عنوان آرگومان می‌گیرد. درون این callback، شما به‌روزرسانی‌های DOM را که نمایانگر انتقال بین نماها هستند، انجام می‌دهید. مرورگر به طور خودکار حالت‌های «قبل» و «بعد» DOM را ثبت کرده و انیمیشن انتقال را ایجاد می‌کند.

در اینجا یک مثال ساده آورده شده است:


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

بیایید این کد را تجزیه کنیم:

  1. `updateContent(newContent)`: این تابع محتوای جدیدی را که باید نمایش داده شود به عنوان آرگومان می‌گیرد.
  2. `document.startViewTransition(() => { ... });`: این هسته اصلی API است. به مرورگر می‌گوید که یک انتقال نما را شروع کند. تابعی که به عنوان آرگومان به `startViewTransition` پاس داده می‌شود، اجرا می‌گردد.
  3. `document.querySelector('#content').innerHTML = newContent;`: درون callback، شما DOM را با محتوای جدید به‌روز می‌کنید. اینجاست که تغییراتی را که می‌خواهید انیمیشن‌سازی کنید، در صفحه ایجاد می‌کنید.

مرورگر بقیه کار را انجام می‌دهد. حالت DOM را قبل و بعد از به‌روزرسانی `innerHTML` ثبت کرده و یک انتقال روان بین دو حالت ایجاد می‌کند.

مثال پیاده‌سازی پایه

در اینجا یک مثال کامل‌تر با HTML، CSS و جاوا اسکریپت آورده شده است:

HTML (index.html):


<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>دموی انتقال نما</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <button data-target="home">خانه</button>
    <button data-target="about">درباره ما</button>
    <button data-target="contact">تماس</button>
  </nav>

  <div id="content">
    <h1>خانه</h1>
    <p>به صفحه اصلی خوش آمدید!</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS (style.css):


body {
  font-family: sans-serif;
  margin: 20px;
}

nav {
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  margin-left: 10px; /* Changed from margin-right for RTL */
}

button:hover {
  background-color: #3e8e41;
}

/* استایل‌ها برای عناصر در حال انتقال */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation-name: fadeOut;
}

::view-transition-new(root) {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

JavaScript (script.js):


const contentDiv = document.getElementById('content');
const navButtons = document.querySelectorAll('nav button');

const pages = {
  home: '
خانه
به صفحه اصلی خوش آمدید!
',
  about: '
درباره ما
درباره ما بیشتر بدانید.
',
  contact: '
تماس
با ما در ارتباط باشید.
',
};

function updateContent(target) {
  document.startViewTransition(() => {
    contentDiv.innerHTML = pages[target];
    document.documentElement.scrollTop = 0; // بازنشانی موقعیت اسکرول
  });
}

navButtons.forEach(button => {
  button.addEventListener('click', (event) => {
    const target = event.target.dataset.target;
    updateContent(target);
  });
});

در این مثال، کلیک بر روی دکمه‌های ناوبری، هنگام به‌روزرسانی محتوا، یک انتقال محو شدن (fade) را فعال می‌کند. CSS انیمیشن‌های `fadeIn` و `fadeOut` را تعریف می‌کند و جاوا اسکریپت از `document.startViewTransition` برای سازماندهی انتقال استفاده می‌کند.

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

API انتقال نمای CSS چندین ویژگی پیشرفته برای سفارشی‌سازی انتقال‌ها ارائه می‌دهد:

۱. انتقال‌های نام‌گذاری شده

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

HTML:


<img src="image1.jpg" alt="تصویر ۱" style="view-transition-name: hero-image;">

CSS:


::view-transition-group(hero-image) {
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
}

این کد نام `hero-image` را به تصویر اختصاص می‌دهد. سپس CSS این گروه انتقال خاص را هدف قرار می‌دهد تا یک انیمیشن سفارشی اعمال کند. شبه‌عنصر `::view-transition-group()` به شما اجازه می‌دهد تا عناصر در حال انتقال خاص را استایل‌دهی کنید.

۲. خاصیت `view-transition-name`

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

۳. کنترل با جاوا اسکریپت

در حالی که این API عمدتاً توسط CSS هدایت می‌شود، شما می‌توانید از جاوا اسکریپت نیز برای کنترل فرآیند انتقال استفاده کنید. برای مثال، می‌توانید به رویداد `view-transition-ready` گوش دهید تا قبل از شروع انتقال اقداماتی را انجام دهید، یا به رویداد `view-transition-finished` برای اجرای کد پس از اتمام انتقال.


document.startViewTransition(() => {
  // به‌روزرسانی DOM
  return Promise.resolve(); // اختیاری: بازگرداندن یک promise
}).then((transition) => {
  transition.finished.then(() => {
    // انتقال به پایان رسید
    console.log('انتقال کامل شد!');
  });
});

خاصیت `transition.finished` یک promise را برمی‌گرداند که پس از اتمام انتقال resolve می‌شود. این به شما امکان می‌دهد اقداماتی مانند بارگذاری محتوای اضافی یا به‌روزرسانی UI را پس از پایان انیمیشن انجام دهید.

۴. مدیریت عملیات ناهمزمان (Asynchronous)

هنگام انجام به‌روزرسانی‌های DOM در داخل callback تابع `document.startViewTransition()`، می‌توانید یک Promise برگردانید تا اطمینان حاصل کنید که انتقال تا زمان تکمیل عملیات ناهمزمان شروع نمی‌شود. این برای سناریوهایی مفید است که قبل از به‌روزرسانی UI نیاز به دریافت داده از یک API دارید.


function updateContent(newContent) {
  document.startViewTransition(() => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // به‌روزرسانی DOM با داده‌های دریافت شده
        document.querySelector('#content').innerHTML = data.content;
      });
  });
}

۵. انتقال‌های CSS سفارشی

قدرت واقعی API انتقال نما در توانایی سفارشی‌سازی انتقال‌ها با CSS نهفته است. شما می‌توانید از انیمیشن‌ها و انتقال‌های CSS برای ایجاد طیف گسترده‌ای از افکت‌ها مانند محو شدن، اسلاید، زوم و غیره استفاده کنید. برای دستیابی به جلوه بصری مورد نظر، با ویژگی‌های مختلف CSS آزمایش کنید.

CSS:


::view-transition-old(root) {
  animation: slideOut 0.5s ease-in-out forwards;
}

::view-transition-new(root) {
  animation: slideIn 0.5s ease-in-out forwards;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

این مثال یک افکت انتقال اسلایدی ایجاد می‌کند.

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

API انتقال نمای CSS یک ویژگی نسبتاً جدید است، بنابراین پشتیبانی مرورگرها هنوز در حال تکامل است. تا اواخر سال ۲۰۲۳، کروم و اج پشتیبانی خوبی دارند. فایرفاکس و سافاری در حال کار بر روی پیاده‌سازی آن هستند. قبل از استفاده از این API در محیط پروداکشن، مهم است که سازگاری فعلی مرورگرها را بررسی کرده و استفاده از polyfill برای مرورگرهای قدیمی‌تر را در نظر بگیرید. polyfill یک قطعه کد جاوا اسکریپت است که عملکرد یک ویژگی جدیدتر را در مرورگرهای قدیمی که به طور بومی از آن پشتیبانی نمی‌کنند، فراهم می‌کند.

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

بهترین شیوه‌ها و ملاحظات

موارد استفاده و مثال‌ها

API انتقال نمای CSS می‌تواند در سناریوهای مختلفی برای بهبود تجربه کاربری استفاده شود:

ملاحظات جهانی

هنگام پیاده‌سازی API انتقال نما در یک وب‌سایت با دسترسی جهانی، موارد زیر را در نظر بگیرید:

نتیجه‌گیری

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

با درک مفاهیم و تکنیک‌های ذکر شده در این راهنما، می‌توانید شروع به استفاده از API انتقال نمای CSS برای ایجاد اپلیکیشن‌های وب صیقلی‌تر و جذاب‌تر کنید. با انتقال‌های مختلف آزمایش کنید، آن‌ها را متناسب با نیازهای خاص خود سفارشی‌سازی کنید و همیشه تجربه کاربری و دسترس‌پذیری را در اولویت قرار دهید. API انتقال نما ابزاری قدرتمند است که می‌تواند به شما در ایجاد اپلیکیشن‌های وب که هم از نظر بصری جذاب و هم بسیار کاربردی هستند، کمک کند.