جلسه ۷۶ – transition در CSS

تو مقدمه، یه جمله کوچیک در مورد مفهوم transition با هم مرور کردیم.

جمله ای که در موردش صحبت کردیم، این بود: “اضافه کردن مدت زمان به تغییرات استایل در CSS”

مفهوم کم و بیش واضحی داره، اما در واقعیت، داره به چی اشاره می‌کنه؟

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

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

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

برای درک این موضوع در این آموزش طراحی وب سایت ، به مثال زیر توجه کنین:

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

در حالی که تغییر استایل دکمه چپ، به صورت ناگهانی و سریع اتفاق میفته.

خب، تا اینجا یه برداشت کلی از این که 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 برای حالتی که نشانگر رو روی دکمه می‌بریم، تعریف می‌کنیم:

dark

همونطور که می‌بینیم، با بردن نشانگر روی دکمه، رنگ پیش زمینه و کناره های اون در طی نیم ثانیه تغییر می‌کنه.

کد های حاوی transition رو کافیه به خود عنصر مورد نظر اختصاص بدیم.

تغییر استایل ورودی متن

تو این مثال، ورودی متنی رو می‌بینیم که فقط با یک خاصیت transition، تونستیم افکت جذابی رو بهش اختصاص بدیم.

dark

ورودی متن مورد نظر، تو حالت فعال، طی یک ثانیه و در حالت ease-in، دارای عرض بیشتری می‌شه.

transition چند گانه

مثال زیر، یک نمونه از transition چند گانه رو به رخ ما می‌کشه که در اون، هم از خاصیت opacity، هم از خاصیت left و هم از خاصیت color استفاده کردیم.

dark

تمامی کد مثال بالا برای ما آشناست، به جز یه قسمت که شاید یکم مبهم باشه:

transition: opacity 2s , left 1s , color 0.5s 1s;

خب حالا این دقیقا یعنی چی؟

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

تو این قسمت، ما چندین transition-property متفاوت داریم که با علامت ” , ” اون ها رو از هم جدا کردیم.

به زبان ساده، دستور بالا رو می‌تونیم به فرم زیر توضیح بدیم:

تغییرات opacity رو در ۲ ثانیه، تغییرات left رو در یک ثانیه، و تغییرات color رو در نیم ثانیه و با تاخیر یک ثانیه انجام بده.

تاخیر یک ثانیه، خودش رو زمانی نشون می‌ده که div ما جا به جا شده،‌ شفافیت ۱ رو گرفته و ناگهان، رنگ متن به سفید تغییر می‌کنه.

با دونستن این موارد، می‌تونیم مثال بالا رو خیلی بهتر و مفصل تر کنیم، اگه خیلی پیگیرین مثال زیر رو از دست ندین 🙂

dark

تحلیل این مثال رو به خودتون می‌سپاریم.

فقط بدونین که مقدار transition-property یا تاخیر تو هر کدوم از div های ظاهر شونده، مقدار بیشتر از div قبلیه.

این موضوع باعث می‌شه که هر کدوم از div ها، به نوبت و منظم ظاهر بشن.

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

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

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

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

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

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

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

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

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

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

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

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

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

• Desktop Chrome: نسخه ۴ به بالا
• Mobile Chrome: نسخه ۸۱ به بالا
• Desktop Firefox: نسخه ۵ به بالا
• Mobile Firefox: نسخه ۶۸ به بالا
• Desktop Safari: نسخه ۵.۱ به بالا
• Mobile Safari: نسخه ۶.۰ به بالا
• Desktop IE: نسخه ۱۰ به بالا
• Desktop Edge: نسخه ۱۲ به بالا

پایان ترم

سوال:

<input type="text" placeholder="">

نتیجه گیری

به انتهای فصل transition ها در آموزش جامع CSS می‌رسیم.

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

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

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

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

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

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسماعیلی‌