پادکست 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 با کارایی بالا را برای بررسی عمیق در این موضوع بررسی کنید.
درک خود را بررسی کنید
دانش خود را در مورد انتقال آزمایش کنید
کدام ویژگی انتقال برای تعیین تسهیل است؟
transition-easing
transition-cubic-bezier
transition-duration
transition-timing-function
animation-ease
بهترین روش استفاده از transition-property: all
است
همه خواص را می توان انتقال داد.