Transitionها

Main Page Tutorial
موارد آموزشی
CSS پیشرفته
۱	گوشه‌های گرد
۲	کادر تصاویر
۳	پس‌زمینه‌ها
۴	رنگ‌ها
۵	Gradientها
۶	سایه‌ها
۷	افکت‌های متن
۸	قلم‌های وب
۹	2D Transforms
۱۰	3D Transforms
۱۱	Transitions
۱۲	انیمیشن‌ها
۱۳	Tooltip
۱۴	استایل‌دهی تصاویر
۱۵	ویژگی object-fit
۱۶	دکمه‌ها
۱۷	مثال‌های صفحه‌بندی (Pagination)
۱۸	ستون‌های متعدد
۱۹	رابط کاربری
۲۰	متغیرها
۲۱	Box Sizing
۲۲	Flexbox
۲۳	Media Queries
۲۴	مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

Transitionها (گذارها) در CSS

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

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

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

• transition

• transition-delay

• transition-duration

• transition-property

• transition-timing-function

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

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

ویژگی
transition	۲۶٫۰	۱۰٫۰	۱۶٫۰	۶٫۱	۱۲٫۱
transition-delay	۲۶٫۰	۱۰٫۰	۱۶٫۰	۶٫۱	۱۲٫۱
transition-duration	۲۶٫۰	۱۰٫۰	۱۶٫۰	۶٫۱	۱۲٫۱
transition-property	۲۶٫۰	۱۰٫۰	۱۶٫۰	۶٫۱	۱۲٫۱
transition-timing-function	۲۶٫۰	۱۰٫۰	۱۶٫۰	۶٫۱	۱۲٫۱

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

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

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

• مدت زمان جلوه

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

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

مثال

1 div {
2   width: 100px;
3   height: 100px;
4   background: red;
5   transition: width 2s;
6 }

حالت 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 تعریف کنید

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

مثال

1 #div1 {transition-timing-function: linear;}
2 #div2 {transition-timing-function: ease;}
3 #div3 {transition-timing-function: ease-in;}
4 #div4 {transition-timing-function: ease-out;}
5 #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 است

صفحهٔ بعد»

«صفحهٔ قبل