انتقال ها

پادکست CSS - 044: Transitions

هنگام تعامل با یک وب سایت، ممکن است متوجه شوید که بسیاری از عناصر دارای حالت هستند. به عنوان مثال، کرکره ها می توانند در حالت باز یا بسته باشند. دکمه ها ممکن است با فوکوس یا نگه داشتن ماوس تغییر رنگ دهند. مدال ها ظاهر می شوند و ناپدید می شوند.

به طور پیش فرض، CSS فوراً سبک این حالت ها را تغییر می دهد.

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

خواص انتقالی

برای استفاده از انتقال در CSS، می‌توانید از ویژگی‌های مختلف انتقال یا ویژگی کوتاه‌نویسی transition استفاده کنید.

انتقال-مالکیت

ویژگی transition-property مشخص می کند که کدام سبک (ها) برای انتقال.

.my-element {
  transition-property: background-color;
}

transition-property یک یا چند نام ویژگی CSS را در یک لیست جدا شده با کاما می پذیرد.

به صورت اختیاری، می توانید از transition-property: all برای نشان دادن اینکه هر ویژگی باید انتقال یابد استفاده کنید.

انتقال-مدت

ویژگی transition-duration برای تعریف مدت زمانی که یک انتقال طول می کشد تا تکمیل شود استفاده می شود.

transition-duration واحدهای زمانی را می‌پذیرد، یا بر حسب ثانیه ( s ) یا میلی‌ثانیه ( ms ) و به‌طور پیش‌فرض روی 0s قرار می‌گیرد.

انتقال-زمان-تابع

از ویژگی transition-timing-function برای تغییر سرعت انتقال CSS در طول transition-duration استفاده کنید.

به‌طور پیش‌فرض، CSS عناصر شما را با سرعت ثابتی جابجا می‌کند ( transition-timing-function: linear ). انتقال‌های خطی می‌توانند تا حدودی مصنوعی به نظر برسند، اما: در زندگی واقعی، اجسام وزن دارند و نمی‌توانند فورا متوقف شوند و شروع شوند. سهولت ورود یا خروج از یک انتقال می تواند انتقال شما را زنده تر و طبیعی تر کند.

ماژول ما در CSS Animation نمای کلی خوبی از عملکردهای زمان بندی دارد.

می‌توانید از DevTools برای آزمایش عملکردهای زمان‌بندی مختلف در زمان واقعی استفاده کنید.

انتقال-تاخیر

از ویژگی transition-delay برای تعیین زمانی استفاده کنید که در آن یک انتقال شروع می شود. اگر transition-duration مشخص نشده باشد، انتقال ها فوراً شروع می شوند زیرا مقدار پیش فرض 0s است. این ویژگی یک واحد زمان را می پذیرد، به عنوان مثال ثانیه ( s ) یا میلی ثانیه ( ms ).

این ویژگی برای انتقال های سرسام آور مفید است که با تنظیم یک transition-delay طولانی تر برای هر عنصر بعدی در یک گروه به دست می آید.

transition-delay برای اشکال زدایی نیز مفید است. تنظیم تأخیر روی یک مقدار منفی می تواند یک انتقال بیشتر به خط زمانی را آغاز کند.

کوتاه نویسی: انتقال

مانند بسیاری از ویژگی های CSS، یک نسخه کوتاه وجود دارد. transition ترکیبی از transition-property ، transition-duration ، transition-timing-function و transition-delay .

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

چه چیزی می تواند و نمی تواند انتقال یابد؟

هنگام نوشتن CSS، می توانید مشخص کنید که کدام ویژگی ها باید دارای انتقال متحرک باشند. این لیست MDN از ویژگی‌های CSS متحرک را ببینید.

به طور کلی، تنها امکان انتقال عناصری وجود دارد که می‌توانند بین حالت‌های شروع و نهایی خود یک "حالت میانی" داشته باشند. به عنوان مثال، اضافه کردن انتقال برای font-family غیرممکن است، زیرا مشخص نیست که "وسط حالت" بین serif و monospace چگونه باید باشد. از سوی دیگر، اضافه کردن انتقال برای font-size امکان پذیر است زیرا واحد آن طولی است که می تواند بین آن درون یابی شود.

در اینجا برخی از ویژگی های متداول وجود دارد که می توانید آنها را تغییر دهید.

تبدیل کنید

ویژگی transform CSS معمولاً جابجا می‌شود، زیرا یک ویژگی با شتاب GPU است که منجر به انیمیشن روان‌تر می‌شود که همچنین باتری کمتری مصرف می‌کند. این ویژگی به شما امکان می دهد تا به طور دلخواه یک عنصر را مقیاس، چرخش، ترجمه یا کج کنید.

بخش تبدیل ها را در ماژول توابع ما بررسی کنید.

رنگ

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

ویژگی‌های color ، background-color و border-color تنها چند مکان هستند که می‌توان رنگ را در اثر تعامل تغییر داد.

ماژول ما را در مورد رنگ بررسی کنید.

سایه ها

سایه ها اغلب برای نشان دادن تغییر ارتفاع، مانند فوکوس کاربر، جابجا می شوند.

ماژول ما در مورد سایه ها را بررسی کنید.

فیلترها

filter یک ویژگی قدرتمند CSS است که به شما امکان می دهد جلوه های گرافیکی را در لحظه اضافه کنید. انتقال بین حالت های مختلف filter می تواند نتایج بسیار چشمگیری ایجاد کند.

ماژول ما در مورد فیلترها را بررسی کنید.

محرک های انتقال

CSS شما باید شامل یک تغییر حالت و رویدادی باشد که تغییر حالت را برای انتقال CSS فعال کند. یک مثال معمولی از چنین ماشه ای :hover pseudo-class است. این شبه کلاس زمانی منطبق می شود که کاربر با مکان نما روی یک عنصر قرار می گیرد.

در زیر فهرستی از شبه کلاس‌ها و رویدادهایی وجود دارد که می‌توانند باعث تغییر حالت در عناصر شما شوند.

• :hover : اگر مکان نما روی عنصر باشد مطابقت دارد.
• :focus : اگر عنصر فوکوس شده باشد مطابقت دارد.
• :focus-within : اگر عنصر یا هر یک از فرزندان آن متمرکز باشد مطابقت دارد.
• :target : زمانی مطابقت دارد که قطعه URL فعلی با شناسه عنصر مطابقت داشته باشد.
• :active : زمانی که عنصر در حال فعال شدن است (معمولاً زمانی که ماوس روی آن فشار داده می شود) مطابقت دارد.
• تغییر class از جاوا اسکریپت: وقتی class CSS یک عنصر از طریق جاوا اسکریپت تغییر می کند، CSS ویژگی های واجد شرایطی را که تغییر کرده اند انتقال می دهد.

انتقال های مختلف برای ورود یا خروج

با تنظیم ویژگی های transition مختلف روی شناور/فوکوس، می توان جلوه های جالبی ایجاد کرد.

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

ملاحظات دسترسی

انتقال CSS برای همه مناسب نیست. برای برخی از افراد، انتقال ها و انیمیشن ها می توانند باعث بیماری حرکت یا ناراحتی شوند. خوشبختانه، CSS دارای یک ویژگی رسانه ای به نام prefers-reduced-motion که تشخیص می دهد کاربر ترجیح داده است حرکت کمتری را از دستگاه خود نشان دهد.

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

پست وبلاگ ما ترجیح می‌دهد-حرکت کاهش یافته را بررسی کنید: گاهی اوقات حرکت کمتر برای اطلاعات بیشتر در مورد این ویژگی رسانه بیشتر است .

ملاحظات عملکرد

هنگام کار با ترانزیشن‌های CSS، اگر انتقال‌هایی را برای ویژگی‌های CSS خاص اضافه کنید، ممکن است با مشکلات عملکردی مواجه شوید. به عنوان مثال، هنگامی که ویژگی‌هایی مانند width یا height تغییر می‌کنند، محتوا را در بقیه صفحه قرار می‌دهند. این امر CSS را مجبور می‌کند تا موقعیت‌های جدید را برای هر عنصر آسیب‌دیده برای هر فریم از انتقال محاسبه کند. در صورت امکان، توصیه می کنیم به جای آن از ویژگی هایی مانند transform و opacity استفاده کنید.

راهنمای ما در مورد انیمیشن های CSS با کارایی بالا را برای بررسی عمیق در این موضوع بررسی کنید.

درک خود را بررسی کنید

دانش خود را در مورد انتقال آزمایش کنید