شورت‌هند transition

ترکیب چهار رکن در یک خط: شورت‌هند transition

در درس قبل، چهار Property مستقل transition-property، transition-duration، transition-timing-function و transition-delay رو دیدیم. حالا وقتشه شورت‌هندی که این چهار مقدار رو، در یک خط واحد، ترکیب می‌کنه رو کامل بررسی کنیم؛ همون Propertyای که، در عمل، در اکثر پروژه‌های واقعی، به‌جای نوشتن جداگانه هر چهار مورد، استفاده می‌شه.

Syntax پایه شورت‌هند transition

.box {
  transition: background-color 0.3s ease-in-out 0.1s;
}

transition: <property> <duration> <timing-function> <delay>;

ترتیب نوشتن این چهار مقدار، مهمه: اول Property مورد نظر، بعد مدت زمان، بعد منحنی سرعت، و در آخر، مقدار تأخیر. این Rule، دقیقاً معادل نوشتن جداگانه چهار خطیه که در درس قبل دیدیم.

کدام مقادیر اختیاری هستند؟

.a {
  transition: background-color 0.3s;
}

.b {
  transition: background-color 0.3s ease-in-out;
}

.c {
  transition: background-color 0.3s ease-in-out 0.1s;
}

در شورت‌هند transition، فقط مقدار Property و مدت زمان عملاً ضروری‌ان (چون بدون مدت زمان، همون‌طور که در درس قبل دیدیم، هیچ انتقالی قابل‌مشاهده نیست). timing-function و delay، اختیاری‌ان؛ اگه ننویسیم‌شون، به مقادیر پیش‌فرض خودشون (به‌ترتیب ease و 0s) برمی‌گردن.

یک نکته مهم درباره تشخیص دو مقدار زمانی

.box {
  transition: opacity 0.3s 0.1s;
}

وقتی دو مقدار زمانی (که هر دو با s یا ms نوشته می‌شن) پشت‌سرهم بیان، مرورگر، همیشه اولی رو duration و دومی رو delay در نظر می‌گیره؛ این ترتیب، ثابت و غیرقابل‌تغییره، مستقل از این‌که timing-function بین‌شون نوشته شده باشه یا نه.

مقدار all در شورت‌هند

.box {
  transition: all 0.3s ease;
}

همون‌طور که در درس قبل هم اشاره کردیم، مقدار all، به‌عنوان بخش Property این شورت‌هند هم قابل‌استفاده‌ست؛ ولی همون توصیه قبلی، اینجا هم صادقه: برای Performance بهتر، معمولاً مشخص کردن دقیق یک یا چند Property خاص، به all ترجیح داده می‌شه.

تعریف چند Transition هم‌زمان با کاما

.card {
  transition: transform 0.2s ease-out, box-shadow 0.3s ease-out;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

یکی از قابلیت‌های مهم شورت‌هند transition که در درس قبل ندیدیمش: می‌شه، با کاما، چند Transition کاملاً مستقل رو، هرکدوم با مدت زمان و منحنی سرعت خودشون، هم‌زمان تعریف کرد. در این مثال، وقتی موس روی کارت قرار می‌گیره، transform در ۰.۲ ثانیه، و box-shadow در ۰.۳ ثانیه، هردو، هم‌زمان ولی با سرعت‌های متفاوت، شروع می‌شن.

مقایسه: نوشتن جداگانه در برابر شورت‌هند برای چند Property

/* روش طولانی */
.card {
  transition-property: transform, box-shadow;
  transition-duration: 0.2s, 0.3s;
  transition-timing-function: ease-out, ease-out;
}

/* روش کوتاه و رایج‌تر */
.card {
  transition: transform 0.2s ease-out, box-shadow 0.3s ease-out;
}

وقتی چند Property، با مقادیر متفاوت زمان‌بندی دارن، نوشتن جداگانه (روش اول)، نیاز به هماهنگ نگه‌داشتن چند لیست جدا (که با کاما از هم جدا شدن) داره؛ در حالی که شورت‌هند، این اطلاعات رو، به‌طور طبیعی‌تر، در یک بلوک واحد برای هر Property، کنار هم نگه می‌داره؛ همین موضوع، شورت‌هند رو، در پروژه‌های واقعی، خواناتر و کمتر مستعد خطا می‌کنه.

یک اشتباه رایج: فراموش کردن کاما بین چند Transition

.wrong {
  transition: transform 0.2s ease-out box-shadow 0.3s ease-out;
}

بدون کاما بین دو گروه، مرورگر، کل این مقدار رو، به‌عنوان یک Transition واحد و نامعتبر تفسیر می‌کنه (چون Syntax، بیش از حد مجاز، مقدار داره)؛ نتیجه، این می‌شه که کل Rule، نادیده گرفته می‌شه، نه فقط بخشی از اون.

یک مثال کامل و کاربردی: دکمه با چند Transition

.button {
  background-color: #2c3e50;
  transform: scale(1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.2s ease,
    transform 0.15s ease-out,
    box-shadow 0.25s ease-out;
}

.button:hover {
  background-color: #34495e;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: scale(0.96);
}

در این مثال، سه Property مختلف (که هرکدوم، در حالت متفاوتی از تعامل، فعال می‌شن: :hover برای رنگ و سایه، :active برای مقیاس)، هرکدوم، مدت زمان و منحنی سرعت مستقل خودشون رو دارن؛ نتیجه، یک دکمه با بازخورد بصری چندلایه و روانه.

نکات مهم

• ترتیب مقادیر در شورت‌هند transition، ثابت است: Property، duration، timing-function، delay.
• وقتی دو مقدار زمانی نوشته شود، همیشه اولی duration و دومی delay در نظر گرفته می‌شود.
• با کاما، می‌توان چند Transition کاملاً مستقل را، هرکدام با تنظیمات زمانی خودشان، در یک شورت‌هند واحد تعریف کرد.

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

• فراموش کردن کاما بین چند گروه Transition، که باعث نامعتبر شدن کل Rule می‌شود، نه فقط بخشی از آن.
• گیج شدن در ترتیب دو مقدار زمانی؛ اولین مقدار همیشه duration است، نه delay.
• استفاده گسترده از transition: all، در جایی که مشخص کردن دقیق Propertyها، هم خواناتر است و هم از نظر Performance بهتر.

جمع‌بندی

شورت‌هند transition، چهار مقدار Property، duration، timing-function و delay را در یک خط واحد ترکیب می‌کند؛ فقط Property و duration عملاً ضروری هستند. با استفاده از کاما، می‌توان چند Transition مستقل، هرکدام با زمان‌بندی خاص خودشان، به‌طور هم‌زمان تعریف کرد؛ این قابلیت، برای ساخت جلوه‌های بصری چندلایه، مثل دکمه‌هایی با چند نوع بازخورد هم‌زمان، بسیار کاربردی است.