transition-property، duration، timing-function، delay

چهار رکن یک انتقال نرم: transition-property، duration، timing-function و delay

وارد فصل هجدهم شدیم؛ فصلی که به Transitions اختصاص داره. تا اینجا، در فصل‌های مختلف (مثل ۹، ۱۰ و ۱۷)، بارها از transition استفاده کردیم، بدون این‌که اجزای تشکیل‌دهنده‌ش رو مستقل ببینیم. حالا وقتشه از پایه شروع کنیم و چهار Property‌ای که هر Transition واقعی رو می‌سازن، یکی‌یکی و دقیق بررسی کنیم.

Transition چیست؟

Transition (گذر یا انتقال)، به مرورگر می‌گه: وقتی مقدار یک Property، از یک حالت به حالت دیگه تغییر می‌کنه، این تغییر رو، به‌جای یک پرش ناگهانی، به‌صورت یک حرکت نرم و تدریجی، در طول یک بازه زمانی مشخص، نمایش بده.

یک مثال بدون Transition: تغییر ناگهانی

.box {
  background-color: royalblue;
}

.box:hover {
  background-color: crimson;
}

بدون هیچ Transitionای، وقتی موس روی این جعبه قرار بگیره، رنگ پس‌زمینه، فوراً و بدون هیچ حرکت میانی، از آبی به قرمز می‌پره؛ این تغییر، از نظر بصری، خشک و ناگهانیه.

transition-property: کدام Property انتقال بگیرد؟

.box {
  background-color: royalblue;
  transition-property: background-color;
}

transition-property، مشخص می‌کنه دقیقاً کدوم Property (یا Propertyها)، قراره این رفتار نرم رو داشته باشن. در این مثال، فقط background-color، مشمول Transition می‌شه؛ اگه عناصر دیگه‌ای هم هم‌زمان تغییر کنن (مثلاً width)، اون‌ها، بدون این Property، همچنان به‌طور ناگهانی تغییر می‌کنن.

مقدار all: انتقال همه Propertyهای قابل‌انیمیشن

.box {
  transition-property: all;
}

مقدار all، به این معنیه که هر Propertyای که تغییر کنه (و ذاتاً قابل‌انیمیشن‌سازی باشه)، این رفتار نرم رو بگیره. این مقدار، ساده و راحته، ولی معمولاً از نظر Performance (که در فصل‌های آینده بررسیش می‌کنیم)، توصیه نمی‌شه؛ چون مرورگر، مجبوره برای هر تغییری، مراقب انتقال احتمالی باشه، حتی برای Propertyهایی که اصلاً قرار نبوده تغییر کنن.

transition-duration: چقدر طول بکشد؟

.box {
  transition-property: background-color;
  transition-duration: 0.3s;
}

transition-duration، مدت زمان این انتقال رو مشخص می‌کنه؛ با واحدهای زمانی که در فصل ۶ (درس ۶-۵) دیدیم، یعنی s (ثانیه) یا ms (میلی‌ثانیه). مقدار پیش‌فرض این Property، برابر 0s است؛ یعنی بدون تعریف صریح یک مدت زمان، حتی با تعریف transition-property، عملاً هیچ انتقال قابل‌مشاهده‌ای اتفاق نمی‌افته (چون مدت زمانش صفره).

transition-timing-function: منحنی سرعت تغییر

.box {
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

transition-timing-function، مشخص می‌کنه سرعت این تغییر، در طول همون بازه زمانی، چطور توزیع بشه؛ یعنی آیا از ابتدا تا انتها، با سرعت ثابت پیش می‌ره، یا در ابتدا کندتره و در وسط سریع‌تر می‌شه، یا برعکس. مقادیر دقیق این Property (مثل ease، linear، cubic-bezier()) رو، با جزئیات کامل، در درس بعدی همین فصل بررسی می‌کنیم؛ فعلاً فقط لازمه بدونیم این Property، بخش سوم از چهار رکن اصلیه.

transition-delay: تأخیر پیش از شروع

.tooltip {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-delay: 0.5s;
}

.trigger:hover .tooltip {
  opacity: 1;
}

transition-delay، یک مکث، پیش از شروع انیمیشن، اضافه می‌کنه. در این مثال، وقتی کاربر، موس رو روی .trigger می‌بره، Tooltip، بلافاصله شروع به نمایش نمی‌کنه؛ اول، نیم ثانیه صبر می‌کنه (transition-delay: 0.5s)، و بعد، طی ۰.۲ ثانیه، به‌آرومی ظاهر می‌شه. این تکنیک، برای جلوگیری از نمایش فوری و آزاردهنده یک Tooltip، فقط با عبور سریع و اتفاقی موس، بسیار رایجه.

یک مثال کامل با هر چهار Property جداگانه

.card {
  transform: scale(1);
  transition-property: transform;
  transition-duration: 0.25s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

.card:hover {
  transform: scale(1.05);
}

در این مثال، هر چهار Property، جداگانه و صریح نوشته شدن: transform، Property مورد نظر برای انتقاله؛ ۰.۲۵ ثانیه، مدت زمانشه؛ ease-out، منحنی سرعتشه؛ و 0s (که مقدار پیش‌فرضه، ولی اینجا صراحتاً نوشته شده)، یعنی بدون هیچ تأخیری، بلافاصله شروع می‌شه.

چرا در عمل، از شورت‌هند transition بیشتر استفاده می‌شود؟

.card {
  transition: transform 0.25s ease-out;
}

در پروژه‌های واقعی، نوشتن این چهار Property به‌صورت جداگانه، کمی پرحجمه؛ به همین دلیل، معمولاً از شورت‌هند transition استفاده می‌شه که، همین چهار مقدار رو، در یک خط، ترکیب می‌کنه. جزئیات کامل این شورت‌هند، ترتیب دقیق نوشتن مقادیرش، و نحوه تعریف چند Transition هم‌زمان رو، در درس‌های بعدی همین فصل، کامل بررسی می‌کنیم.

جدول جمع‌بندی چهار Property

Property	سؤالی که جواب می‌دهد	مقدار پیش‌فرض
transition-property	کدام Property انتقال بگیرد؟	all
transition-duration	چقدر طول بکشد؟	0s
transition-timing-function	با چه سرعتی (منحنی) تغییر کند؟	ease
transition-delay	چقدر قبل از شروع صبر شود؟	0s

نکات مهم

• بدون تعریف transition-duration (یا تعریفش با مقدار 0)، حتی با وجود transition-property، هیچ انتقال قابل‌مشاهده‌ای اتفاق نمی‌افتد.
• مقدار all برای transition-property، ساده است ولی از نظر Performance، معمولاً کمتر از مشخص کردن دقیق یک Property توصیه می‌شود.
• transition-delay، یک مکث پیش از شروع انیمیشن اضافه می‌کند؛ کاربردی برای جلوگیری از فعال شدن فوری و ناخواسته یک جلوه (مثل Tooltip) با عبور سریع موس.

اشتباهات رایج

• فراموش کردن transition-duration، در حالی که transition-property تعریف شده؛ که نتیجه‌اش، عدم وقوع هیچ انتقال قابل‌مشاهده‌ای است.
• استفاده گسترده و بی‌رویه از transition-property: all، حتی وقتی فقط یک Property خاص نیاز به انتقال دارد.
• قاطی کردن transition-delay با transition-duration؛ اولی زمان قبل از شروع، دومی مدت خود انتقال است.

جمع‌بندی

هر Transition واقعی، از چهار رکن اصلی تشکیل می‌شود: transition-property (کدام Property)، transition-duration (چقدر طول بکشد)، transition-timing-function (با چه منحنی سرعتی) و transition-delay (چقدر تأخیر قبل از شروع). درک مستقل این چهار Property، پایه‌ی نوشتن و خواندن صحیح شورت‌هند transition است که در درس‌های بعدی همین فصل، با جزئیات کامل بررسی خواهد شد.