انتقال ها و تعامل های ظریف با transition در CSS | درس 48 + پروژه درس

وقتی رنگ یک دکمه با بردن ماوس ناگهان تغییر می کند، کاربر تغییر حالت را می بیند. با transition می توان همین تغییر را طی یک زمان کوتاه انجام داد تا رابطه میان دو حالت روشن تر شود. در درس 48، کارت خدمات و پیوندهای آن را می سازیم؛ کارت کمی بالا می رود، رنگ دکمه نرم تغییر می کند و کاربر صفحه کلید هم بازخورد واضح دارد. برای کسانی که کاهش حرکت را در دستگاه فعال کرده اند، جابه جایی حذف می شود.

transition چه کاری انجام می دهد؟

انتقال، میان مقدار قبلی و مقدار جدید یک ویژگی قابل انتقال حرکت می کند. وجود transition به تنهایی تغییری ایجاد نمی کند؛ باید مقدار ویژگی مثلا با hover، فوکوس یا تغییر کلاس عوض شود. در این جلسه همه تغییر حالت ها با CSS انجام می شوند و به اسکریپت نیاز نداریم. با انیمیشن های چندمرحله ای در جلسه بعد آشنا می شویم.

در درس شبه کلاس های CSS حالت های hover و focus-visible را بررسی کردیم. اینجا همان حالت ها را حفظ می کنیم و تنها شیوه تغییر برخی ویژگی ها را مشخص می کنیم. محتوا و مسیر پیوندها از ابتدا در HTML وجود دارند؛ برای دیده شدن اطلاعات اصلی لازم نیست کاربر چیزی را هاور کند.

چهار بخش اعلان transition

.button {
  background: #075985;
  transition: background-color 180ms ease-out;
}
.button:focus-visible {
  background: #0c4a6e;
}

ابتدا نام ویژگی را می نویسیم: اینجا فقط background-color. زمان 180ms مدت انتقال است. ease-out آهنگ تغییر را تعیین می کند؛ انتقال سریع تر شروع می شود و نزدیک پایان آرام تر می شود. ورودی چهارم می تواند تاخیر باشد و در این مثال حذف شده، پس تاخیر صفر است. اگر دو مقدار زمان بنویسید، اولی مدت و دومی تاخیر است.

.example {
  transition-property: background-color;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
  transition-delay: 0ms;
}

زمان باید واحد داشته باشد. مقدار پیش فرض duration صفر است؛ بنابراین اگر فقط نام ویژگی را تعیین کنید، انتقال قابل مشاهده ای رخ نمی دهد. برای چند ویژگی، هر انتقال را کامل و با کاما جدا کنید. این شیوه از اشتباه در تطبیق فهرست های مدت و ویژگی جلوگیری می کند.

اعلان را در حالت پایه قرار دهید

در پروژه transition روی خود button و card قرار دارد، نه فقط در hover. به این ترتیب وقتی حالت فعال می شود و وقتی برداشته می شود، قاعده انتقال در دسترس است. اگر آن را فقط در hover بنویسید، بازگشت می تواند ناگهانی شود، چون پس از خروج ماوس آن اعلان دیگر اعمال نمی شود. ابتدا هر دو جهت تغییر را ببینید؛ فقط زیبا بودن لحظه ورود کافی نیست.

از transition: all برای شروع هر پروژه استفاده نکنید. با اضافه شدن یک قاعده تازه، ویژگی هایی که انتظار ندارید هم ممکن است وارد انتقال شوند. نام بردن از transform یا background-color باعث می شود هدف واضح باشد. برای کنترل محدوده قواعد، درس انتخابگرهای CSS را مرور کنید.

حرکت کوتاه کارت بدون جابه جایی همسایه ها

.card {
  transition: transform 180ms ease-out;
}
.card:focus-within {
  transform: translateY(-4px);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
  }
}

کارت در حالت فعال چهار پیکسل بالا می رود. transform جای اختصاص داده شده عنصر در جریان معمول صفحه را تغییر نمی دهد؛ بنابراین کارت های همسایه برای این حرکت دوباره کنار هم چیده نمی شوند. با این حال خود کارت ممکن است روی محتوای اطراف بیفتد یا در والد دارای overflow بریده شود، پس فاصله و سرریز را بررسی کنید. برای این مشکل، درس مدیریت سرریز مفید است.

focus-within زمانی برقرار می شود که خود عنصر یا یکی از فرزندان آن فوکوس داشته باشد. کارت را با tabindex به توقف اضافه صفحه کلید تبدیل نکرده ایم؛ لینک واقعی داخل آن فوکوس می گیرد و کارت هم بازخورد می دهد. شرط hover و pointer، جلوه ماوس را به ورودی اصلی دارای هاور و اشاره دقیق محدود می کند. این شرط تشخیص قطعی نوع دستگاه نیست؛ دستگاه های ترکیبی ممکن است چند ورودی داشته باشند. عملکرد پیوندها نباید به این جلوه وابسته باشد.

کادر فوکوس را فوری و واضح نگه دارید

a:focus-visible {
  outline: 3px solid #9a3412;
  outline-offset: 4px;
}

در پروژه، کادر فوکوس هیچ تاخیری ندارد. رنگ دکمه می تواند طی 180ms تغییر کند، اما کاربر باید همان لحظه بفهمد صفحه کلید روی کدام پیوند است. حذف outline برای ظاهر تمیزتر، به ویژه وقتی فقط سایه کم رنگی باقی می ماند، راه حل مناسبی نیست. اگر طراحی را تغییر دادید، مرز فوکوس را روی هر دو زمینه روشن و تیره ببینید.

سایه ثابت کارت از قواعد درس سایه ها و فیلترها استفاده می کند. در این پروژه آن را انیمیت نکرده ایم تا اثر حرکت کارت و تغییر رنگ دکمه واضح و مستقل بماند. برای شکل کادر و گردی گوشه ها هم درس border و border-radius را مرور کنید.

ترجیح کاهش حرکت کاربر را رعایت کنید

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card:hover,
  .card:focus-within {
    transform: none;
  }
  .button {
    transition: none;
  }
}

این مدیا کوئری ترجیح کاهش حرکت را از محیط کاربر دریافت می کند. فقط صفر کردن زمان کافی نیست؛ اگر transform را نگه دارید، کارت همچنان ناگهانی جابه جا می شود. در نمونه، هم انتقال و هم جابه جایی کارت حذف شده اند، ولی تغییر رنگ و کادر فوکوس باقی می مانند. چون قاعده حرکت و قاعده کاهش حرکت اولویت انتخابگری مناسب دارند و بخش کاهش حرکت بعدتر آمده است، نتیجه مورد انتظار اعمال می شود.

در ابزار توسعه مرورگر می توانید prefers-reduced-motion را شبیه سازی کنید. پس از فعال کردن reduce، با ماوس و Tab دوباره آزمایش کنید. اگر حرکت باقی ماند، در بخش Styles ببینید آیا قاعده جدیدتری transform را بازنویسی کرده است. برای پروژه های بزرگ تر می توانید مدت ها را مثل متغیرهای مشترک CSS نام گذاری کنید، اما محدوده و ترتیب قواعد همچنان مهم است.

چه ویژگی هایی را انتخاب کنیم؟

برای حرکت کوتاه، transform معمولا انتخاب مناسب تری از تغییر margin یا width است؛ تغییر اندازه ها می تواند چیدمان اطراف را تحت تاثیر قرار دهد. این به معنای رایگان بودن هر transform یا تضمین اجرای روان نیست. روی دستگاه ضعیف، محتوای بزرگ و چند جلوه همزمان را آزمایش کنید. افزودن همیشگی will-change هم لازم نیست و می تواند منابع مصرف کند.

انتقال height از صفر به auto، یا نمایش با display:none، در همه شرایط مانند انتقال دو عدد ساده رفتار نمی کند. قابلیت های جدید برای بعضی حالت های گسسته وجود دارند، اما پروژه این جلسه عمدا به رنگ و transform محدود شده تا رفتار قابل پیش بینی بماند. اگر منوی واکنش گرا می سازید، ترتیب فوکوس و دسترسی به لینک ها از ظاهر حرکت مهم تر است؛ درس ساخت منوی واکنش گرا را هم بررسی کنید.

برنامه آزمایش پروژه

1. ZIP را استخراج کنید و index.html را باز کنید. همه فایل ها و فونت ها محلی هستند.
2. ماوس را روی کارت ببرید و خارج کنید. هر دو جهت باید نرم باشند. روی لینک کلیک کنید و رسیدن به بخش راهنما یا تمرین را ببینید.
3. با Tab حرکت کنید. لینک باید outline فوری بگیرد و کارت دارای لینک هم بازخورد داشته باشد. سپس با Shift+Tab مسیر را برگردید.
4. در عرض 320 و 768 پیکسل و بزرگ نمایی 200 درصد بررسی کنید که متن بریده نشود. چیدمان Grid پروژه باید کارت ها را متناسب با فضای موجود قرار دهد.
5. ترجیح کاهش حرکت را فعال کنید؛ کارت نباید جابه جا شود. لینک ها و مقصدها باید همچنان کار کنند.

تمرین مستقل و پاسخ

پیوند practice-link از قبل رنگ اولیه و حالت های hover و focus-visible دارد، اما تغییر رنگ آن فوری است. فقط برای همین پیوند انتقال رنگ 200ms با ease-out اضافه کنید. در prefers-reduced-motion: reduce انتقال را حذف کنید. کارت ها و دکمه های بالا نباید تغییر کنند. پاسخ در solution.css جداست و از ابتدا بارگذاری نمی شود.

.practice-link {
  transition: color 200ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .practice-link {
    transition: none;
  }
}

پس از حل تمرین، تغییر آزمایشی را بردارید و خط زیر را بعد از style.css در head اضافه کنید. پاسخ را هم با ماوس، هم با صفحه کلید و هم در حالت کاهش حرکت بررسی کنید.

<link rel="stylesheet" href="solution.css">

پرسش های متداول

چرا transition اجرا نمی شود؟

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

آیا hover برای موبایل کافی است؟

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

چرا بازگشت کارت ناگهانی است؟

احتمالا transition را فقط داخل hover تعریف کرده اید. آن را در قاعده پایه قرار دهید و هر دو مسیر را بررسی کنید.

آیا زمان طولانی تر ظاهر حرفه ای تری می سازد؟

الزاما خیر. برای بازخورد کوچک، زمان کوتاه معمولا مناسب تر است. مقدار پروژه یک انتخاب آموزشی است؛ سرعت تعامل را با کاربرد واقعی تنظیم کنید.

درس قبلی: سایه ها، فیلترها و جلوه های بصری CSS

درس بعدی: انیمیشن ها و keyframes در CSS | درس 49