تطبیق نوع گذار نمایش (View Transition) در CSS: تسلط بر ارتباط نوع انیمیشن

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

درک مبانی گذارهای نمایش

قبل از پرداختن به ارتباط نوع انیمیشن، بیایید به طور خلاصه اصول بنیادی گذارهای نمایش CSS را مرور کنیم. آن‌ها یک مکانیزم استاندارد برای انیمیشن دادن به تغییرات بین حالت‌های DOM فراهم می‌کنند. هنگامی که یک تغییر حالت رخ می‌دهد (به عنوان مثال، پیمایش بین صفحات در یک اپلیکیشن تک‌صفحه‌ای یا به‌روزرسانی محتوا در یک کامپوننت)، گذارهای نمایش حالت عناصر را قبل و بعد از تغییر ثبت می‌کنند. سپس این حالت‌های ثبت‌شده برای ایجاد گذارهای انیمیشنی استفاده می‌شوند.

مکانیزم اصلی با تابع document.startViewTransition() آغاز می‌شود که یک تابع callback را می‌پذیرد که DOM را به حالت جدید به‌روزرسانی می‌کند.

مثال:

 document.startViewTransition(() => {
  // DOM را به حالت جدید به‌روزرسانی کنید
  updateTheDOM();
 });

قدرت view-transition-name

ویژگی CSS view-transition-name پایه و اساس شناسایی عناصری است که باید در یک گذار نمایش شرکت کنند. عناصری با view-transition-name یکسان، به طور منطقی در حالت‌های مختلف به هم متصل در نظر گرفته می‌شوند. سپس مرورگر به طور خودکار شبه‌عناصری (pseudo-elements) را که نماینده حالت‌های 'قدیمی' و 'جدید' این عناصر هستند، تولید می‌کند و به شما امکان می‌دهد انیمیشن‌ها را بر روی آن‌ها اعمال کنید.

مثال:

.card {
  view-transition-name: card-element;
}

در این مثال، حالت تمام عناصری که کلاس 'card' را دارند قبل و بعد از به‌روزرسانی DOM ثبت می‌شود و اگر view-transition-name آن‌ها در طول به‌روزرسانی‌ها ثابت بماند، در یک گذار شرکت خواهند کرد.

ارتباط نوع انیمیشن: معرفی view-transition-class

ارتباط نوع انیمیشن، که عمدتاً از طریق ویژگی CSS view-transition-class به دست می‌آید، کلید سفارشی‌سازی انیمیشن‌های اعمال‌شده در طول گذارهای نمایش است. این ویژگی به شما امکان می‌دهد انیمیشن‌های مختلفی را برای عناصر مختلف بر اساس نقش‌ها یا انواع آن‌ها در گذار مشخص کنید. به آن مانند اختصاص «نقش‌های» انیمیشن به بخش‌های مختلف گذار فکر کنید.

ویژگی view-transition-class مانند هر ویژگی CSS دیگری به یک عنصر اختصاص داده می‌شود. مقدار آن یک رشته است و سپس آن رشته برای انتخاب شبه‌عناصر مناسب ::view-transition-* در CSS شما استفاده می‌شود.

قدرت واقعی زمانی آشکار می‌شود که شما view-transition-class را با شبه‌عناصر ::view-transition-group، ::view-transition-image-pair، ::view-transition-new و ::view-transition-old ترکیب کنید.

درک شبه‌عناصر (Pseudo-Elements)

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

مثال‌های عملی از ارتباط نوع انیمیشن

بیایید چند مثال عملی را بررسی کنیم تا نحوه عملکرد ارتباط نوع انیمیشن را در عمل نشان دهیم.

مثال ۱: محو شدن تدریجی محتوای جدید (Fade In)

فرض کنید لیستی از آیتم‌ها دارید و می‌خواهید آیتم‌های جدید هنگام اضافه شدن به صورت محو شدن تدریجی ظاهر شوند. می‌توانید از view-transition-class و ::view-transition-new برای دستیابی به این هدف استفاده کنید.

HTML:

<ul id="item-list">
  <li class="item" style="view-transition-name: item-1;">آیتم ۱</li>
  <li class="item" style="view-transition-name: item-2;">آیتم ۲</li>
</ul>

جاوا اسکریپت (برای افزودن یک آیتم جدید):

function addNewItem() {
  document.startViewTransition(() => {
    const newItem = document.createElement('li');
    newItem.classList.add('item');
    newItem.style.viewTransitionName = `item-${Date.now()}`;
    newItem.style.viewTransitionClass = 'new-item'; // اختصاص کلاس
    newItem.textContent = 'آیتم جدید';
    document.getElementById('item-list').appendChild(newItem);
  });
}

CSS:

::view-transition-new(item-*) {
  animation: fade-in 0.5s ease-in-out;
}

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

در این مثال، ما کلاس 'new-item' را قبل از گذار نمایش به آیتم لیست جدید اختصاص می‌دهیم. سپس CSS شبه‌عنصر ::view-transition-new را (که با نام `item-*` از استایل `view-transition-name` مطابقت دارد) هدف قرار داده و یک انیمیشن محو شدن را اعمال می‌کند. توجه داشته باشید که خود کلاس `new-item` در انتخابگر CSS استفاده *نشده* است. *مقدار* ویژگی view-transition-class فقط زمانی مهم است که در نظر بگیریم آن را روی کدام عنصر *واقعی* تنظیم می‌کنیم.

مثال ۲: لغزیدن محتوای قدیمی به بیرون (Slide Out)

با تکیه بر مثال قبلی، بیایید کاری کنیم که آیتم‌های قدیمی به بیرون بلغزند در حالی که آیتم جدید محو می‌شود.

جاوا اسکریپت (مانند قبل):

function addNewItem() {
  document.startViewTransition(() => {
    const newItem = document.createElement('li');
    newItem.classList.add('item');
    newItem.style.viewTransitionName = `item-${Date.now()}`;
    newItem.style.viewTransitionClass = 'new-item'; // اختصاص کلاس
    newItem.textContent = 'آیتم جدید';
    document.getElementById('item-list').appendChild(newItem);
  });
}

CSS:

::view-transition-new(item-*) {
  animation: fade-in 0.5s ease-in-out;
}

::view-transition-old(item-*) {
  animation: slide-out 0.5s ease-in-out;
}

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

@keyframes slide-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

در اینجا، ما یک انیمیشن به شبه‌عنصر ::view-transition-old اضافه کرده‌ایم که باعث می‌شود آیتم قدیمی در حین محو شدن به سمت چپ بلغزد و خارج شود. دوباره توجه داشته باشید که view-transition-class فقط بر روی عنصر *جدیدی* که اضافه می‌کنیم مرتبط است؛ این بر عناصر *قدیمی* که از قبل در صفحه هستند و در گذار شرکت می‌کنند، تأثیری ندارد.

مثال ۳: یک گذار ناوبری پیچیده‌تر

یک اپلیکیشن تک‌صفحه‌ای (SPA) با یک منوی ناوبری را در نظر بگیرید. هنگامی که کاربر روی یک آیتم منو کلیک می‌کند، ناحیه محتوا باید به آرامی به صفحه جدید منتقل شود. ما می‌توانیم از view-transition-class برای تمایز بین نواحی هدر و محتوا استفاده کنیم و انیمیشن‌های مختلفی را به هر کدام اعمال کنیم.

HTML (ساده‌شده):

<header style="view-transition-name: header; view-transition-class: header-transition;">
  <h1>وب‌سایت من</h1>
</header>
<main style="view-transition-name: content; view-transition-class: content-transition;">
  <p>محتوای اولیه</p>
</main>

جاوا اسکریپت (ساده‌شده):

function navigateTo(pageContent) {
  document.startViewTransition(() => {
    document.querySelector('main').innerHTML = pageContent;
  });
}

CSS:

::view-transition-old(header) {
  animation: fade-out 0.3s ease-in-out;
}

::view-transition-new(header) {
  animation: fade-in 0.3s ease-in-out;
}

::view-transition-old(content) {
  animation: slide-out-left 0.5s ease-in-out;
}

::view-transition-new(content) {
  animation: slide-in-right 0.5s ease-in-out;
}

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

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

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

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

در این سناریو، هدر محو و ظاهر می‌شود، در حالی که محتوا از سمت راست وارد و به سمت چپ خارج می‌شود، که یک تجربه ناوبری پویا و جذاب ایجاد می‌کند. ما این کار را با اعمال کلاس‌های header-transition و content-transition انجام دادیم که به ما امکان می‌دهد هدر و نواحی محتوا را به طور جداگانه با انیمیشن‌های مختلف هدف قرار دهیم.

بهترین شیوه‌ها برای استفاده از ارتباط نوع انیمیشن

برای استفاده مؤثر از ارتباط نوع انیمیشن، بهترین شیوه‌های زیر را در نظر بگیرید:

• گذار‌های خود را برنامه‌ریزی کنید: قبل از پیاده‌سازی هر گذار، انیمیشن‌های مورد نظر و چگونگی بهبود تجربه کاربری را با دقت برنامه‌ریزی کنید. جریان اطلاعات و نحوه هدایت بصری کاربر از طریق تغییرات را در نظر بگیرید.
• از نام‌های کلاس توصیفی استفاده کنید: نام‌های کلاسی را انتخاب کنید که به وضوح نقش عنصر را در گذار نشان می‌دهند (مانند 'new-item'، 'old-item'، 'header-transition'). این کار خوانایی و قابلیت نگهداری کد را بهبود می‌بخشد.
• انیمیشن‌ها را مختصر نگه دارید: از انیمیشن‌های بیش از حد پیچیده یا طولانی که می‌توانند حواس کاربر را پرت کنند یا سرعت برنامه را کاهش دهند، خودداری کنید. به دنبال گذارهای نرم و ظریفی باشید که تجربه کاربری را بهبود می‌بخشند نه اینکه مانع آن شوند. چشم انسان به تأخیرهای طولانی‌تر از چند صد میلی‌ثانیه حساس است، بنابراین گذارها را سریع نگه دارید.
• به طور کامل تست کنید: گذارهای خود را در دستگاه‌ها و مرورگرهای مختلف تست کنید تا اطمینان حاصل کنید که به درستی رندر می‌شوند و به نرمی اجرا می‌شوند. به عملکرد، به ویژه در دستگاه‌های تلفن همراه، توجه کنید.
• دسترس‌پذیری را در نظر بگیرید: به کاربرانی که به حرکت حساس هستند، توجه داشته باشید. گزینه‌ای برای غیرفعال کردن انیمیشن‌ها یا کاهش شدت آن‌ها فراهم کنید. از مدیا کوئری prefers-reduced-motion می‌توان برای تشخیص اینکه آیا کاربر درخواست کاهش حرکت را در تنظیمات سیستم عامل خود داده است، استفاده کرد.
• از Cascade به طور مؤثر استفاده کنید: از آبشار (Cascade) CSS برای مدیریت انیمیشن‌ها بهره ببرید. ویژگی‌های انیمیشن مشترک را در یک کلاس پایه تعریف کنید و سپس ویژگی‌های خاص را برای حالت‌های مختلف گذار نمایش بازنویسی کنید.

تکنیک‌ها و ملاحظات پیشرفته

تخصیص کلاس پویا

در حالی که مثال‌های بالا از استایل‌های درون‌خطی برای view-transition-name و view-transition-class استفاده می‌کنند، در برنامه‌های کاربردی واقعی، احتمالاً می‌خواهید این‌ها را به صورت پویا با استفاده از جاوا اسکریپت مدیریت کنید. این به شما امکان می‌دهد کلاس‌های مختلفی را بر اساس تغییر حالت خاص یا تعامل کاربر اعمال کنید.

مثال:

function updateContent(newContent, transitionType) {
  document.startViewTransition(() => {
    const mainElement = document.querySelector('main');
    mainElement.innerHTML = newContent;

    // حذف هرگونه کلاس گذار موجود
    mainElement.classList.remove('slide-in', 'fade-in');

    // افزودن کلاس گذار مناسب
    if (transitionType === 'slide') {
      mainElement.classList.add('slide-in');
    } else if (transitionType === 'fade') {
      mainElement.classList.add('fade-in');
    }
  });
}

این مثال نشان می‌دهد که چگونه می‌توان کلاس‌های CSS را به صورت پویا برای کنترل انیمیشن بر اساس نوع گذار مورد نظر اضافه کرد.

کار با کامپوننت‌های پیچیده

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

مثال:

<div style="view-transition-name: component;">
  <h2 style="view-transition-name: component-title; view-transition-class: title-transition;">عنوان کامپوننت</h2>
  <p style="view-transition-name: component-content; view-transition-class: content-transition;">محتوای کامپوننت</p>
</div>

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

مدیریت عملیات ناهمگام (Asynchronous)

اگر به‌روزرسانی حالت شما شامل عملیات ناهمگام باشد (مانند دریافت داده از یک API)، باید اطمینان حاصل کنید که تابع callback document.startViewTransition() *پس از* اتمام عملیات ناهمگام اجرا می‌شود. این کار را می‌توان با استفاده از promises یا async/await انجام داد.

مثال:

async function updateContentAsync(newContentUrl) {
  document.startViewTransition(async () => {
    const response = await fetch(newContentUrl);
    const newContent = await response.text();
    document.querySelector('main').innerHTML = newContent;
  });
}

سازگاری بین مرورگرها و Polyfill‌ها

تا اواخر سال ۲۰۲۴، گذارهای نمایش CSS در مرورگرهای مدرن مانند Chrome، Edge و Firefox از پشتیبانی خوبی برخوردارند. با این حال، مرورگرهای قدیمی‌تر یا Safari ممکن است برای پشتیبانی به polyfill نیاز داشته باشند. قبل از استقرار در محیط پروداکشن، آزمایش گذارهای خود در مرورگرهای مختلف و در نظر گرفتن استفاده از یک polyfill مانند آنچه که توسط ابتکار Open UI ارائه شده است، در صورت لزوم، بسیار مهم است.

قبل از پیاده‌سازی گسترده گذارهای نمایش CSS، پشتیبانی فعلی مرورگرها را در سایت‌هایی مانند caniuse.com بررسی کنید.

آینده گذارهای نمایش

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

نتیجه‌گیری

ارتباط نوع انیمیشن، که توسط ویژگی view-transition-class تسهیل می‌شود، یک جنبه حیاتی در تسلط بر گذارهای نمایش CSS است. با درک نحوه اختصاص «نقش‌های» انیمیشن مختلف به عناصر با استفاده از کلاس‌ها و هدف قرار دادن آن‌ها با شبه‌عناصر ::view-transition-*، می‌توانید گذارهای خیره‌کننده و جذابی ایجاد کنید که تجربه کاربری اپلیکیشن‌های وب شما را بهبود می‌بخشد. به یاد داشته باشید که گذارهای خود را با دقت برنامه‌ریزی کنید، از نام‌های کلاس توصیفی استفاده کنید، انیمیشن‌ها را مختصر نگه دارید, به طور کامل تست کنید و دسترس‌پذیری را در نظر بگیرید. با در نظر گرفتن این اصول، می‌توانید پتانسیل کامل گذارهای نمایش CSS را آزاد کرده و تجربیات وب واقعاً قابل توجهی برای کاربران در سراسر جهان ایجاد کنید.

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