cssblog.ir logo
P

transition-property

مشخصه transition

با کمک این مشخصه می‌توان تعیین نمود که تغییرات کدام مشخصه‌های عنصر می‌بایست با تاخیر نمایش داده شوند

در CSS برای تعیین transition باید حتما مشخص کنیم که می‌خواهیم روی کدامیک از مشخصه‌هاtransition داشته باشیم که برای مشخص نمودن این امر، باید نام آن مشخصه (مانند width) یا برای عمل روی تمام مشخصه ها کلمه کلیدی all را بکار ببریم.

مشخصه transition-property یک زیرمشخصه از مشخصه transition است که با استفاده از آن می‌توانیم مشخصه های تحت تاثیر transition را تعیین کنیم.

مقادیر قابل قبول

برای این مشخصه باید نام مشخصه مورد نظر (یا لیستی از آنها) را وارد کنیم. 

مقدار تکی 

در این مثال مشخصه width دارای transition است و تغییرات آن با تاخیر نمایش داده می‌شوند

 

لیست مقادیر

اگر نام مشخصه‌ها را با استفاده از کاما (,) جدا کنیم هریک از مقادیر به ترتیب به هرtransition عنصر نگاشت داده می‌شوند. مانند:

کلمه کلیدی none

این کلمه کلیدی بیان می کند که هیچ مشخصه ای تحت تاثیرtransition نباشد.

button {
	transition-property: none;
	transition-duration: 1s;
	transition-timing-function: linear;
}

کلمه کلیدی all

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

مانند:

button {
	transition-property: all;
	transition-duration: 2s;
	transition-timing-function: linear;
}

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

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

پیشنهاد می شود که نگاهی به جدول پشتیبانی این مشخصه توسط مرورگرها داشته باشید و در صورت نیاز از vendor-prefix ها برای افزایش پشتیبانی از مرورگرها، استفاده کنید. مانند:

button {
	-webkit-transition-property: none;
	-moz-transition-property: none;
	-ms-transition-property: none;
	transition-property: none;
}

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

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

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

<% errorMessage %>

<% comment.name %>

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

<% reply.name %>

avatar

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

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

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

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

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

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

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