طراحی وب: ۵- ترنزیشن

ترنزیشن به معنای جابجایی است. و در CSS باعث می‌شود تغییر پراپرتی به آرامی انجام شود. ترنزیشن یک راه ساده برای ایجاد انیمیشن در وب است. برای نمونه شما می‌توانید در CSS بنویسید: هنگامی که ماوس روی المنت می‌رود نحوه‌ی نمایش آن تغییراتی کند. (رنگ، سایز، سایه و … تغییر کند.)

بدون ترنزیشن این تغییرات به یک باره اتفاق می‌افتد.

ولی با ترنزیشن این تغییرات به آرامی انجام می‌گیرد.

تریگر – Trigger

به رویدادهایی که باعث این تغییر می‌شود تریگر یا ماشه می‌گویند.

رویدادهایی که در ترنزیشن‌ بیشتر به کار می‌روند، عبارتند از:

• :hover
• :active
• :focus

پراپرتی‌های انیمیشن پذیر

همه پراپرتی‌های المنت قابلیت متحرک سازی ندارند. تنها برخی از پراپرتی‌ها می‌توانند به آرامی و در مدت زمان خاصی به مقدار جدید تغییر کنند. مثلا نوع فونت این امکان را ندارد. ولی سایز و رنگ را می‌توان به آرامی تغییر داد. در اینجا لیست کامل پراپرتی‌های انیمیشن پذیر آمده است.

تعریف ترنزیشن

ترنزیشن با استفاده از چند پراپرتی کنترل می‌شود.

transition-duration

مدت زمان ترنزیشن را مشخص می کند. می‌توانید یک مدت زمان واحد را برای همه پراپرتی‌ها تعیین کنید. یا برای هر پراپرتی یک مدت زمان جداگانه تعیین کنید. واحد زمان s برای ثانیه یا ms برای میلی ثانیه باید حتما نوشته شود. مقدار پیش فرض صفر است.

transition-property

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

transition-delay

قبل از ترنزیشن چقدر باید منتظر ماند. واحد زمان s برای ثانیه یا ms برای میلی ثانیه باید حتما نوشته شود. مقدار پیش فرض صفر است.

transition-timing-function

تابعی را معرفی می‌کند که به کمک آن مقادیر میانی پراپرتی محاسبه می‌شود. برای طراحی این تابع ویدیوی زیر را ببینید:

دستور خلاصه

هر چهار دستور بالا را می‌توانید در یک دستور زیر خلاصه کنید.

transition: property duration timing-function delay;

---

مثال

در فریم زیر مقادیر را تغییر دهید و با بردن ماوس روی مربع سرمه‌ای نتیجه آن را ببینید.

---

مثال

ترنزیشن سایه Shadow Transition

.item {
	transition: all 0.5s;
}

.item:hover {
	box-shadow: 0 10px 20px 0 rgba(0,0,0,0.5);
}

پوینتر ماوس را روی تصویر ببرید و تغییر آن را ببینید.

---

مثال

ترنزیشن سایه داخلی Inner Shadow

.item {
	transition: all 0.5s;
}
.item.button1:hover {
	color: Beige;
	box-shadow: 200px 0 0 0 DimGray inset;
}
.item.button2:hover {
	color: Beige;
	box-shadow: 0 60px 0 0 DimGray inset;
}
.item.button3:hover {
	color: Beige;
	box-shadow: 0 0 0 30px DimGray inset;
}
.item.button4:hover {
	color: Beige;
	box-shadow: 0 0 100px 0 DimGray inset;
}

پوینتر ماوس را روی دکمه‌ها ببرید و تغییر آن را ببینید.

---

مثال

ساخت آکوردیون Accordion روش اول

item {
	max-height: 0;
	transition: max-height 0.5s;
}

item:target {
	max-height: 400px;
}

روی آیتم‌ها کلیک کنید و تغییر آن را ببینید.

---

مثال

ساخت آکوردیون Accordion روش دوم

input {
	display: none;
}

item {
	max-height: 0;
	transition: max-height 0.5s;
}

input:checked ~ item {
	max-height: 400px;
}

روی آیتم‌ها کلیک کنید و تغییر آن را ببینید.

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• در فایل CSS آن تغییراتی بدهید تا همانند ویدیوی زیر تصاویر به آرامی fade شوند.