cssblog.ir logo
P

css-transition

مشاهده تغییرات مشخصه‌ها

transition های CSS به ما این امکان را می دهند تا تغییرات صورت گرفته روی مشخصه های مختلف را با تاخیر نمایش دهیم.

در CSS با استفاده از transition ها می‌توانیم تعیین کنیم که تغییرات یک یا چند مشخصه به همراه مقداری تاخیر و بصورتی مانند انیمیشن، اجرا شود. مثلا می‌توانیم تعیین کنیم تغییراتی که روی مشخصه top یک عنصر انجام می‌شود، در مدت زمان ۲ ثانیه اعمال شوند تا مثلا اگر مشخصه top یک عنصر از ۰ به ۲۰ پیکسل تغییر پیدا کرد، ۲ ثانیه طول بکشد تا قسمت top عنصر به نقطه ۲۰ پیکسل برسد.

در صورتیکه transition استفاده نشده باشد تغییرات مشخصه ها بصورت یک تکه (یه هویی) اعمال خواهند شد و در برخی مواقع اندکی پَرِش نیز مشاهده خواهد شد.

یک نمونه transition: برای مشاهده تاثیر این مشخصه، روی عنصر داخل مثال، هاور (hover) کنید

اجزای transition

هر transition دارای ۴ جزء می باشد که به شرح زیر است:

p {
	transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
}

مشخصه تحت تاثیر - transiton-property

باید مشخصه شود که کدام مشخصه باید تحت تاثیر این transition قرار بگیرد. اگر نخواهیم کاملا دقیق بیان کنیم می توانیم از مقدارall به معنی «همه مشخصه ها» استفاده کنیم.

div {
	transition: all 0.3s ease;
}

button {
	transition: background 0.200ms linear;
}

مدت زمان - transition-duration

زمان اجرای transition که باید بصورت عدد اعشاری یا صحیح با واحد ثانیه یا میلی‌ثانیه وارد شود.مانند 0.2s یا 300ms

تابع زمانبندی - transition-timing-function

تابع زمانبندی تعیین می کند که تغییرات مشخصه با چه تابعی به مدت زمان اجرای transition ارتباط پیدا کند (اطلاعات بیشتر)

زمان تاخیر - transition-delay

زمان تاخیر اجرای transition است که اختیاری بوده و باید بصورت عدد اعشاری یا صحیح با واحد ثانیه یا میلی‌ثانیه تعیین شود.

مثال نحوه استفاده از transition

برای مثال می توان در حالت hover یک دکمه، رنگ پس زمینه آن را تغییر داد و برای این تغییر رنگ ۱ ثانیه transition درنظر گرفت

ترتیب زیرمشخصه ها

ترتیبی که این زیر مشخصه ها وارد می شوند چندان مهم نیست مگر اینکه transition-delay هم تعیین شده باشد که در اینصورت بهتر است با ترتیبی بیان شده در قسمت بالا، وارد کنیم.

p {
	transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
}

در کدام state باید transition وجود داشته باشد

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

چند transiton بصورت یکجا

همانطور که گفته شد اگر بخواهیم باید مشخصه تحت تاثیر transition تعیین شود و برای تعیین نکردن یک مشخصه خاص می‌توان از واژه all استفاده کرد. مانند:


div {
	transition: all 0.3s ease;
}

اما ممکن است در برخی مواقع استفاده ازall مطلوب نباشد و بخواهیم فقط ۲ مشخصه transition داشته باشند. چراکه استفاده از all باعث می‌شود تا همه مشخصه‌ها با transition تغییر کنند. مثلا فرض کنید ما نمی‌خواهیم تغییرات عرض با transition باشد و فقط می‌خواهیم background-color و left این چنین باشند در چنین مواقعی می‌توانیم چند transition را با کاما (,) جدا کنیم و در قالب یک declartion وارد کنیم. در مثال زیر با اینکه مشخصه color هم هنگام :hover تعییر می‌کند اما transition روی آن رخ نمی‌دهد:

پیشنهاد می کنیم که نگاهی به لیست مشخصه های با قابلیت انیمیشن را مشاهده کنید و برای داشتن کنترل بیشتر روی انیمیشن عناصر، از  انیمیشن ها و keyframe استفاده کنید.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند