Transitionها

از موتو کد، دانشنامهٔ برنامه‌نویسی

Transitionها (گذارها) در CSS[ویرایش | ویرایش]

Transitionها در CSS به شما اجازه می‌دهند که مقدار ویژگی‌ها را به آرامی، طی یک بازه زمانی تعیین شده تغییر دهید.[۱]

نشانه‌گر ماوس را روی عنصر زیر ببرید تا یک حالت transition در CSS را ببینید:

در این فصل درمورد ویژگی‌های زیر مطالبی را خواهید آموخت:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

پشتیبانی مرورگرها از transitionها[ویرایش | ویرایش]

اعداد درون جدول مشخص کننده اولین نسخه مرورگرهایی است که بطور کامل از این ویژگی پشتیبانی می کنند.

ویژگی Chrome Internet Explorer / Edge Firefox Safari Opera
transition ۲۶٫۰ ۱۰٫۰ ۱۶٫۰ ۶٫۱ ۱۲٫۱
transition-delay ۲۶٫۰ ۱۰٫۰ ۱۶٫۰ ۶٫۱ ۱۲٫۱
transition-duration ۲۶٫۰ ۱۰٫۰ ۱۶٫۰ ۶٫۱ ۱۲٫۱
transition-property ۲۶٫۰ ۱۰٫۰ ۱۶٫۰ ۶٫۱ ۱۲٫۱
transition-timing-function ۲۶٫۰ ۱۰٫۰ ۱۶٫۰ ۶٫۱ ۱۲٫۱

چطور از Transitionsها در CSS استفاده کنیم؟[ویرایش | ویرایش]

برای ساخت یک حالت transition، باید دو چیز را مشخص کنید:

  • ویژگی CSS ای که می‌خواهید به آن یک جلوه (Effect) اضافه کنید
  • مدت زمان جلوه

نکته: اگر قسمت مربوط به مدت زمان مشخص نشود، tranisiton هیچ حالتی نخواهد داشت، زیرا مقدار پیش فرض برابر با ۰ است.

مثال زیر یک عنصر <div> قرمز رنگ در اندازهٔ 100px * 100px را نشان می‌دهد. عنصر <div> همچنین یک حالت transition برای ویژگی عرض (width) با مدت زمان دو ثانیه نیز دارد:

مثال
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

حالت transition زمانی آغاز می‌شود که مقدار ویژگی CSS مشخص شده (عرض) تغییر کند.

حالا، می خواهیم زمانی که کاربر نشانه‌گر موس را روی عنصر <div> قرار می‌دهد، مقدار جدیدی برای ویژگی width مشخص کنیم:

مثال
div:hover {
  width: 300px;
}

توجه داشته باشید که زمانی که نشانه‌گر ماوس خارج از عنصر باشد، عنصر به تدریج به اندازه پیش‌فرض خود بازمی‌گردد.

تغییر چند مقدار ویژگی[ویرایش | ویرایش]

مثال زیر یک حالت transition برای هر دو ویژگی width (به فارسی: عرض) و height (به فارسی: ارتفاع)، به مدت ۲ ثانیه برای ویژگی width و ۴ ثانیه برای ویژگی heigth اضافه می‌کند:

مثال
div {
  transition: width 2s, height 4s;
}

مشخص کردن منحنی سرعت transition[ویرایش | ویرایش]

ویژگی transition-timing-function منحنی سرعت transition را مشخص می‌کند.

ویژگی transition-timing-function می‌تواند مقادیر زیر را داشته باشد:

  • ease- یک حالت transition، با شروع آرام، سپس سریع و سپس پایان آرام را مشخص می کند (حالت پیش‌فرض)
  • linear- یک حالت transition با سرعت یکسان از ابتدا تا انتها را مشخص می‌کند
  • ease-in- یک حالت transition با آغاز آرام را مشخص می‌کند
  • ease-out - یک حالت transition با پایان آرام را مشخص می‌کند
  • ease-in-out - یک حالت transition با آغاز و پایان آرام را مشخص می‌کند
  • cubic-bezier(n,n,n,n) - به شما اجازه می‌دهد مقادیر خود را درون تابع cubic-bazier تعریف کنید


مثال زیر تفاوت برخی از منحنی‌های سرعت را که می‌توان از آنها استفاده کرد نشان می‌دهد:

مثال
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

ایجاد تأخیر در حالت Transition[ویرایش | ویرایش]

ویژگی transition-delay مشخص کننده یک تأخیر (به ثانیه) برای حالت transition است.

مثال زیر یک تأخیر یک ثانیه ای را قبل از آغاز دارد:

مثال
div {
  transition-delay: 1s;
}

Transition + Transformation[ویرایش | ویرایش]

مثال زیر یک حالت transition را به transformation اضافه می‌کند:

مثال
div {
  transition: width 2s, height 2s, transform 2s;
}

مثال های بیشتری از Transition[ویرایش | ویرایش]

ویژگی‌های transition در CSS می‌توانند یکی یکی، همانند زیر مشخص شوند:

مثال
div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

و یا با استفاده از ویژگی مختصر transition:

مثال
div {
  transition: width 2s linear 1s;
}

خود را با تمرین ها امتحان کنید![ویرایش | ویرایش]

ویژگی Transition در CSS[ویرایش | ویرایش]

جدول زیر تمام ویژگی‌های Transition در CSS را لیست می‌کند:

ویژگی توضیحات
transition یک ویژگی مختصر برای تنظیم چهار ویژگی Transition درون یک ویژگی
transition-delay تأخیر (به ثانیه) برای حالت Transition را مشخص می کند
transition-duration مشخص می‌کند چند ثانیه یا میلی ثانیه طول می‌کشد تا حالت Transition کامل شود
transition-property مشخص کننده نام ویژگی CSS ای است که حالت Transition به آن تعلق دارد
transition-timing-function مشخص کننده منحنی سرعت حالت Transition است

منابع آموزشی[ویرایش]