انتقال در CSS- کار با Transitions در CSS
خوش اومدین به بیست و سومین جلسه از دوره آموزش رایگان CSS . در این جلسه در مورد ویژگی Transitions یا انتقال در CSS صحبت میکنیم. ما با استفاده از این ویژگی میتونیم زمان و سرعت اتفاق افتادن برخی از اتفاقات توی صفحه رو مدیریت کنیم. هرچند ما ابزار اختصاصی برای انیمیشن در CSS داریم ولی میتونیم یه انیمیشن کوتاه رو با استفاده از این ویژگی بوجود بیاریم.
ویژگی Transitions (انتقال در CSS)
برای اینکه افکتهای transition رو روی یه عنصر html اعمال کنیم باید دو چیز رو در نظر بگیریم:
۱- نوع ویژگی ای که قرار هست ویژگی transition یا انتقال رو روی اون اعمال کنیم. (مثل توابع جابجایی، تبدیل یا تغییر اندازه عناصر و…)
۲- مشخص کردن مدت زمان اجرای افکت transition
مثال زیر رو ببینید:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
در مثال بالا من برای عنصر div طول و عرض ۱۰۰ پیکسل رو مشخص کردم با پس زمینه قرمز رنگ. همچنین در ویژگی transition دو مورد بالا رو مشخص کردم. ابتدا گفتم که تنظیمات transition من برای عرض div هست و در بخش دوم مدت زمان اجرا رو روی ۲ ثانیه تنظیم کردم. در بخش بعدی برای سودو hover این div عرض ۳۰۰ پیکسل رو مشخص کردم. به این ترتیب زمانی که کاربر موس رو روی div من میبره تغییر اندازه عرض ۱۰۰ پیکسل به ۳۰۰ پیکسل، بجای اینکه در لحظه انجام بشه، ۲ ثانیه طول میکشه.
من در مثال بالا ویژگی transition رو فقط برای width عنصر div خودم تعریف کرده بودم. در نمونه زیر این ویژگی رو برای width و height عنصر div تعریف میکنم:
div{
transition: width 2s, height 4s;
}
با توجه به قطعه کد بالا اگر فرض کنیم که طول و عرض div من تغییر کند، تغییر اندازه عرض ۲ ثانیه و تغییر اندازه ارتفاع ۴ ثانیه طول خواهد کشید.
تنظیمات سرعت transition – تنظیم سرعت انتقال در css
بصورت پیشفرض زمانی که از ویژگی transition استفاده میکنیم و مدت زمانی رو براش تعیین میکنیم، عمل انتقال یا transition به آرامی شروع میشه و بعد سریع تر پیش میره و در انتها هم به آرامی تمام میشه. ما این امکان رو داریم که با استفاده از ویژگی transition-timing-function سرعت اثرگذاری ویژگی transtion رو تنظیم کنیم. این ویژگی میتونه مقادیر زیر رو بگیره:
- ease : این مقدار باعث میشه که افکت transation به آرامی شروع بشه و بعد سریع تر بشه و در آخر باز هم به آرامی تمام بشه. (حالت پیشفرض هم همین مقدار هست)
- linear : این مقدار باعث میشه که افکت با سرعتی یکنواخت شروع و تمام بشه.
- ease-in : این مقدار باعث میشه که افکت transition با سرعتی آهسته شروع بشه.
- ease-out : این مقدار باعث میشه که افکت transition با سرعتی آهسته تمام بشه.
- ease-in-out : این مقدار باعث میشه که افکت transition با سرعتی آهسته شروع و با سرعتی آهسته تمام بشه.
- cubic-bezier(n,n,n,n) : این تابع به ما این امکان رو میده که با استفاده از پارامترهایی سرعت ویژگی افکت transition رو مشخص کنیم.
مثال زیر رو ببینید:
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
تاخیر اثرگذاری انتقال در CSS
ممکن است ما بخواهیم عمل انتقال در CSS یا همان transition با تاخیر مشخصی انجام بشه. ما میتونیم با استفاده از ویژگی transition-delay زمان شروع اثرگذاری ویژگی transition رو به تاخیر بندازیم.
به عنوان مثال من در قطعه کد پایین برای اجرای ویژگی transition به مدت ۱ ثانیه تاخیر تعریف کردم:
div {
transition-delay: 1s;
}
اعمال ویژگی transition برو روی توابع تبدیل دو بعدی و سه بعدی (transformation)
ما در جلسات قبلی با استفاده از ویژگی transform تبدیل های دو بعدی و تبدیل های سه بعدی رو روی عناصر خودمون پیاده سازی کردیم. حالا میخواهیم ویژگی transition رو روی آنها اعمال کنیم. برای اینکار کافیه که در زمان مقداردهی ویژگی transition مقدار transform را وارد کنیم و زمان مورد نظرمان رو هم وارد کنیم. نمونه زیر رو ببینید:
div {
transition: width 2s, height 2s, transform 2s;
}
همونطور که توی مثال بالا میبینید من علاوه بر اینکه transition رو با width و height مقداردهی کردم، برای transform هم مقداردهی کردم. به این ترتیب تبدیل های دو بعدی و سه بعدی که با استفاده از ویژگی transform روی عنصر div اعمال بشوند هم در مدت ۲ ثانیه اعمال خواهند شد.
ما در این جلسه از دو ویژگی transition-timing-function برای تنظیم سرعت اثرگذاری و transition-delay برای تاخیر در شروع اثرگذاری استفاده کردیم. ما میتوانیم این دو ویژگی را هم با استفاده از ویژگی transition مقداردهی کنیم. مثال زیر رو ببینید:
div {
transition: width 2s linear 1s;
}
همونطور که میبینید مقدار دو ویژگی transition-timing-function و transition-delay را هم در مقابل ویژگی transition تعریف کردم. در واقع ویژگی transition که در بالا میبینیم خلاصه شده ۴ ویژگی پایین است:
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}