transition در CSS

مفهوم و تعریف کلی transition

معنای لغوی transition، به شکل “انتقال” و “تغییر از حالتی به حالت دیگر” تفسیر می‌شه.

تو یه تعریف دقیق و واضح تر می‌تونیم بگیم: “transition در CSS، به ما این قابلیت رو می‌ده که تغییرات رو در مدت زمان مشخصی به وجود بیاریم”

کار با ویژگی Transitions در css

به منظور اعمال افکت های transition روی یک عنصر html . شما ابتدا باید دو چیز را مد نظر داشته باشید:

۱- ویژگی css که قصد دارید. عمل transition را روی آن اعمال کنید. (مانند توبع جابه جایی ، انتقال یا تغییر اندازه عناصر و …).

۲-  تعیین مدت زمانی که می خواهید. در طول آن زمان، افکت transition اجرا شود.

نکته : اگر مدت زمان را تعیین نکنید .  بصورت پیش فرض مقدار “۰” در نظر گرفته می شود. و در نتیجه شما هیچ نتیجه ای را در اجرا مشاهده نخواهید کرد.

خاصیت های transition

برای استفاده از transition، می‌تونیم از چندین خاصیت استفاده کنیم که هر کدوم، کاربرد های خودشون رو دارن.

• transition-duration
• transition-delay
• transition-timing-function
• transition-property

خاصیت transition-duration

این خاصیت، هسته اصلی transition تو عناصر ما به حساب میاد.

توسط این خاصیت، می‌تونیم مدت زمانی که یک transition طول می‌کشه رو تعیین کنیم.

در صورت استفاده نکردن از این خاصیت، هیچکدوم از خاصیت های دیگه transition ما کار نخواهند کرد.

ورودی این خاصیت، شامل مقادیر زمانی می‌شه و حتما باید بر حسب ثانیه “s” یا میلی ثانیه “ms” بیان بشن.

برای مثال، می‌خوایم وقتی نشانگر رو، روی دکمه بردیم، تغییر استایل دکمه، طی ۲ ثانیه اتفاق بیفته:

button{

transition-duration: 2s;

}

خاصیت transition-delay

این خاصیت، مدت زمان انتظاری رو قبل از اجرا شدن transition برای ما تعیین می‌کنه.

برای مثال، ما می‌خوایم وقتی که نشانگر رو روی یک دکمه بردیم، تغییر استایل این دکمه، بعد از ۲ ثانیه اتفاق بیفته.

کافیه بنویسیم:

button{

   transition-delay: 2s; }

این خاصیت هم، دقیقا مثل خاصیت transition-duration، مقادیر زمانی بر حسب ثانیه و میلی ثانیه رو قبول می‌کنه.

خاصیت transition-timing-funtion

این خاصیت رو، زمانی استفاده می‌کنیم که می‌خوایم سرعت تغییر استایل در مراحل مختلف transition رو مشخص کنیم.

مقادیر زیر، مورد قبول این خاصیت هستن:

• ease: مقدار پیش فرض
• ease-in: این مقدار، با سرعت پایین شروع می‌کنه و در انتها به سرعت بالا می‌رسه.
• ease-out: این مقدار، با سرعت بالا شروع می‌کنه و در انتها به سرعت پایین می‌رسه.
• ease-in-out: این مقدار، با سرعت پایین شروع می‌کنه، در میانه به سرعت بالا می‌رسه و در انتها مجددا به سرعت پایین می‌رسه.
• linear: این مقدار، تمام فرآیند رو با سرعت یکسان انجام می‌ده.

برای درک بهتر موضوع، به مثال های زیر دقت کنین:

تو مثال بالا، یک عنصر div رو می‌بینیم که تحت مقادیر مختلف transition-timing-function، از عرض ۱۰۰ پیکسل به عرض ۸۰۰ پیکسل تغییر می‌کنه.

خاصیت transition-property

این خاصیت، زمانی به کار می‌ره که ما می‌خوایم نحوه transition رو مشخص کنیم.

transition معمولا روی خاصیت هایی مثل width، opacity و … انجام می‌شه.

برای مثال، به کد زیر توجه کنین:

div{

transition-property: opacity;

}

مفهوم این خاصیت رو در زمان استفاده از چند transition مختلف، بیشتر متوجه می‌شیم.

خاصیت transition

این خاصیت، همون shorthand یا کوتاه شده ی تمامی خاصیت های مربوطه به transition هست.

توسط این خاصیت، می‌تونیم به سرعت و سادگی، تمامی دستورات مختص به transition رو در یک دستور جا بدیم.

برای مثال، دستورات زیر رو می‌تونیم به شکل خلاصه بنویسیم:

/* --- مفصل --- */
div{ transition-duration: 2s;
 transition-property: width;
 transition-delay: 3s;
 transition-timing-function: linear; 
}
/* --- خلاصه --- */
div{
   transition: width 2s 3s linear;
}

نکته ای که باید بهش توجه کنیم، اینه که قرار گرفتن مقادیر در این خاصیت، ترتیب خاصی نداره.

با این استثنا که باید همیشه مقدار delay رو بعد از duration قرار بدیم.

بررسی یک مثال کامل از transition

توجه کنید که مانند نمونه کد بالا می‌توان همزمان از چند transition مختلف استفاده کرد به این شرط که آنها را به کمک (,) جدا کنید.

در کد بالا برای hover همزمان سه افکت در نظر گرفته شده از جمله: تغییر رنگ، تغییر بک‌گراند و گرد شدن دور دکمه. اما با هاور کردن دکمه همه‌ی افکت‌ها به یک باره اعمال نمی‌شوند و آن هم به دلیل استفاده کردن از transition است.

خاصیت های transition ناپذیر

تا اینجا خاصیت های مختلفی رو تو اجرای transition رو عناصر بررسی کردیم.

اما تمامی خاصیت های CSS، نمی‌تونن transition پذیر باشن.

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

برای مثال، خاصیت width، یک خاصیت transition پذیر محسوب می‌شه. چرا که برای تغییر عرض یک عنصر از ۱۰۰ پیکسل به ۵۰۰ پیکسل، می‌تونیم مراحل زیر رو طی کنیم:

1. از ۱۰۰ تا ۲۰۰
2. از ۲۰۰ تا ۳۰۰
3. از ۳۰۰ تا ۴۰۰
4. از ۴۰۰ تا ۵۰۰

یا برای تغییر شفافیت یک عنصر از ۰.۴ تا ۱، توسط خاصیت opacity، مراحل زیر رو طی می‌کنیم:

1. از ۰.۴ الی ۰.۷
2. از ۰.۷ الی ۱

اما خاصیت هایی مثل display، از خاصیت هایی هستن که نمی‌تونیم به اون ها transition و محدوده ی زمانی اختصاص بدیم.

چرا که مرحله خاصی ندارن. طبق خاصیت display، یک عنصر یا هست، یا نیست!

تو سایت مرجع developer.mozilla، می‌تونین خاصیت های transition پذیر رو مطالعه کنین.

پشتیبانی مرورگر ها

پشتیبانی مرورگر ها از خاصیت های transition به شرح زیره:

رفع مشکل عدم پشتیبانی

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

نتیجه گیری

تو این فصل یاد گرفتیم که چطور می‌تونیم افکت های جذابی با استفاده از transitionها بسازیم.

خاصیت های مهمی تو این مقاله جذاب با هم یاد گرفتیم عبارت بودن از:

• transition-duration: تعیین مدت زمان انجام transition
• transition-delay: تعیین تاخیر قبل از انجام transition
• transition-timing-function: تعیین نحوه انجام فرآیند transition
• transition-property: تعیین خاصیت تحت transition

CSS Transitions و  CSS Transformations یک روش عالی برای دادن یک ظاهر خوب به تجربیات کاربران است.

آن‌ها کاملاً به زبان CSS ساخته شده اند، بنابراین، شما می‌توانید بدون نیاز به جاوا اسکریپت، افکت‌های زیبایی داشته باشید.

Transitions انتقال مدت زمان تغییر یک عنصر را مشخص می‌کند و حالت آرام را با گذشت زمان تغییر می‌دهد و بدون آن‌ها، تغییر حالت بصری، ناگهانی و فوری است.

برای اعمال تغییرات (Transitions)، می‌توانید از خصوصیات transition-property (مورد نیاز)، transition-duration (لازم)، transition-timing-function و transition-delay استفاده کنید. Transformها به طراحان وب این امکان را می‌دهد

که ظاهر یک عنصر را در یک سطح 2D جابجا یا تغییر دهند.

آن‌ها معمولاً با تغییر حالت شناور شروع می‌شوند. چهار نوع از transforms عبارتند از Rotate ،Skew ،Scale و Translate. معقول است

که هنگام استفاده از transformها از transitions استفاده کنید تا افکت صاف و تدریجی حاصل شود.

این تازه اول راهه، تو فصل انیمیشن های CSS خیلی بیشتر با این موارد کار می‌کنیم.

امیدوارم که بهره ی کافی رو برده باشین

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

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

نویسنده: حانیه گل لاله کرمانی