استفاده از transition بدون :hover

مرداد ۱۱, ۱۳۹۲ توسط : حمید تدینی

pseudo classes

ایجاد transition برای زمانی که ماوس روی یک شئ قرار میگیرد یک امر تقریبا عادی در طراحی وب ما طراحان و برنامه نویسان وب شده است که با استفاده از شبه کلاس hover: انجام می شود . اما باید توجه داشت که این کد را می توان در بسیاری از شبه کلاس های دیگر نیز استفاده کرد …
در این نمونه کد یک گذار معولی را برای تغییر رنگ یک لینک مشاهده می کنید :

a, a:link, a:visited {
color: lightblue;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-o-transition: color .4s linear;
-ms-transition: color .4s linear;
transition: color .4s linear;
}

a:hover {
color: white;
}

این قطعه کد باعث خواهد شد تا وقتی روی لینک ها قرار میگیریم رنگ آنها به آرامی تغییر کند . اما باید توجه داشته باشیم که دستورات transition محدود به شبه کلاس hover: نمی شوند .
شما میتوانید برای حالات و عملیات های دیگر نیز یک transition تعریف نمائید . در زیر چند نمونه از این حالات مختلف را با هم بررسی کرده و برای هر کدام ، مثالی نیز آورده ایم .

transition با شبه کلاس :active

شبه کلاس active: یکی از راه هایی است که به وسیله آن می توانیم تشخیص دهیم که کدام عنصر فعال می باشد و این عنصر ، همان عنصری می باشد که ماوس بر روی آن کلیک کرده است .
نمونه کد زیر چگونگی تعریف عملیات مورد نظر ما برای شبه کد active: را نمایش می دهد که در هنگام کلیک ماوس بر روی یک شئ عمل خواهد نمود .

.box {
width: 300px;
height: 300px;
background: #222;
-webkit-transition: width 2s ease, height 2s ease;
-moz-transition: width 2s ease, height 2s ease;
-o-transition: width 2s ease, height 2s ease;
-ms-transition: width 2s ease, height 2s ease;
transition: width 2s ease, height 2s ease;
}

.box:active {
width: 500px;
height: 500px;
}

با استفاده از این قطعه کد ، عرض و ارتفاع جعبه سیاه رنگ ما ، به هنگام کلیک ماوس بر روی آن بزرگتر خواهد شد و بعد از اینکه کلید ماوس را رها کردید ، اندازه جعبه به حالت عادی آن باز خواهد گشت :
به مثال توجه نمائید : مشاهده دمو

Transition با شبه کلاس :focus

شما می توانید از شبه کلاس focus: برای زمانی استفاده کنید که تمرکز بر روی یک شئ خاص می باشد . مثلا زمانی که کاربر بر روی یک فیلد متنی کلیک کرده و میخواهد در آن تایپ نماید :

input, textarea {
width: 280px;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}

input:focus, textarea:focus {
width: 340px;
}

نتیجه این کد را می توانید در لینک مقابل مشاهده کنید : مشاهده دمو

Transition با شبه کلاس :checked

شما می توانید برای زمانی که یک checkbox انتخاب شده است یا خیر نیز کدهای مورد نظر خود را بنویسید . بدین روش می توانید در هنگامی که checkbox مورد نظر انتخاب شد آنرا تغییر مکان یا تغییر رنگ دهید و یا بلعکس . این مسئله در کدهای زیر نمایش داده شده است :

input[type=”checkbox”]:checked {
height: 20px;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}

input[type=”checkbox”]:checked {
width: 30px;
}

مثال این نمونه کدهای در لینک مقابل قابل مشاهده می باشد : مشاهده دمو

Transition با استفاده از :disabled

در ادامه کدی را مشاهده می کنیم که به وسیله آن میتوانیم برای اشیائی که غیر فعال هستند نیز یک transition خاص را اعمال نمائیم تا مثلا هنگامی که حالت آنها از فعال به غیر فعال تغییر می کند ، رنگ آنها تغییر کند یا اندازه آنها کوچکتر شود .

input[type=”text”], textarea {
background: #e2e2e2;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-o-transition: background 1s ease;
-ms-transition: background 1s ease;
transition: background 1s ease;
}

input:disabled, textarea:disabled {
background: #666666;
}

همچنین یکی از سریعترین راه ها برای فعال کردن یا غیر فعال کردن یک آیتم در JQuery را میتوان در مثال زیر مشاهده کرد :

$(function() {
$(‘input[type=”radio”]’).click(function() {
if ($(‘:checked’).val() === “other”) {
$(‘input[type=”text”]’).removeAttr(“disabled”);
} else {
$(‘input[type=”text”]’).attr(“disabled”, “disabled”);
}
});
});

بنابراین با توجه به کد JQuery بالا که در مثال ما استفاده شده در صورتی که یکی از گزینه ها بجز آخرین گزینه انتخاب شده باشد ، کادر متنی به حالت غیر فعال درآمده و رنگ آن باید تغییر نماید .
قالب تعریف شده در شبه کلاس disabled: زمانی که شئ مربوط به آن ، غیر فعال یا فعال شود عمل خواهد کرد .
این مسئله را می توانید در مثال مقابل مشاهده نمائید : مشاهده دمو

Transition با استفاده از کوئری رسانه ها

یکی از راه هایی که شما می توانید با توجه به وضعیت اشیاء و پنجره های خود ، عملیاتی را انجام دهید این روش می باشد .
بعنوان مثال در هنگامی که پنجره کاربر دارای سایز خاص باشد عملیات خاصی را انجام دهد . بدین منظور به کدهای زیر توجه نمائید :

.box {
width: 440px;
height: 440px;
background: #222;
margin: 0 auto;
-webkit-transition: width 2s ease, height 2s ease;
-moz-transition: width 2s ease, height 2s ease;
-o-transition: width 2s ease, height 2s ease;
-ms-transition: width 2s ease, height 2s ease;
transition: width 2s ease, height 2s ease;
}

@media only screen and (max-width : 960px) {
.box {
width: 300px;
height: 300px;
}
}

در کدهای بالا ، عملیات transition زمانی انجام خواهد شد که پنجره مادر دارای عرض حداکثر ۹۶۰ پیکسلی باشد .
این مسئله را در مثال زیر مشاهده نمائید : مشاهده دمو

نکاتی بیشتر در رابطه با کدهای بالا

در کدهای بالا سعی شده است تمامی استانداردهای مربوط به transition رعایت شود . حتی در مرورگرهایی که از این امکانات پشتیبانی نمی کنند .
حتی من در تمامی کدهای خودم از -ms- استفاده کرده ام که در مرورگرهای IE9 و IE10 تعریف نشده اند اما قرار شده در نسخه های بعدی IE10 به بالا اعمال شوند . پس یک خط کد اضافی مشکلی ایجاد نخواهد کرد .

راه دیگری وجود دارد ؟

راه های مختلف دیگری برای جایگزین کردن این عملیات ها وجود دارد . بعنوان مثال استفاده از JQuery را می توان نام برد . در صورتی که شما راهکار دیگری را سراغ دارید در پایین همین مقاله نظر خود را وارد نمائید .

بازدید : ۲۵۰۸

شهریور ۵, ۱۳۹۲ @ ۸:۰۹ ب.ظ

خیلی جالب و کاربری بود
خسته نباشید

پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*