Transitionها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
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ها

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

ویژگی 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) با مدت زمان دو ثانیه نیز دارد:

مثال
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 است


منابع آموزشی