ترانزیشن ها در

ترانزیشن ها در CSS3 – آموزش CSS مقدماتی درس 43

ترانزیشن (Transition) در CSS3 به شما این امکان را می دهد که بتوانید مقدار ویژگی ها را در طی یک مدت زمان به خصوص تغییر دهید.

درک ترانزیشن ها در CSS3

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

CSS3 امکان انتقال (ترانزیشن) آرامتر به ویژگی های جدید را در اختیار ما قرار می دهد که در نتیجه به نظر حالتی انیمیشنی ایجاد می شود و مقدارهای قدیمی به آرامی با مقدارهای جدید جایگزین می گردند. در مثالی که در ادامه آمده است، شما می توانید چگونگی انیمیشنی شدن رنگ پس زمینه یک دگمه HTML در زمانی که نشانگر ماوس بر روی آن قرار میگیرد، را مشاهد کنید.

مثال

button {

    background: #fd7c2a;

    /* For Safari 3.0+ */

    -webkit-transition-property: background;

    -webkit-transition-duration: 2s;

    /* Standard syntax */

    transition-property: background;

    transition-duration: 2s;

}

button:hover {

    background: #3cc16e;

}

برای آنکه این تغییر شکل اتفاق بیفتد، شما باید حداقل دو چیز را در اختیار داشته باشید، نام ویژگی CSS که می خواهید افکت تغییر مقدار بر روی آن اتفاق بیتفد، و دومین نکته، استفاده از ویژگی transition در آن ویژگی، که به شما امکان زمان بندی تغییر را می دهد (و همیشه هم باید چیزی بیشتر از صفر باشد)، برای تنظیم بازه زمانی تغییر شکل نیز باید از ویژگی transition-duration در CSS استفاده کنید. هرچند، تمام ویژگی های تغییر شکل دیگر به صورت اختیاری هستند، و در صورتی که در مقدارهای پیش فرض آن ها تغییری ایجاد نکنیم، تغییری را در انجام ترانزیشن ما نخواهند داد.

نکته

تمام ویژگی های CSS قابلیت انمیشن شدن را دارا هستند. به صورت کلی، هر ویژگی CSS که مقداری را می پذیرد که آن مقدار شامل عدد، طول واحد، درصد و یا رنگ باشد، قابلیت انمیشن شدن را داراست.

انجام چند ترانزیشن

هرکدام از ویژگی های ترانزیشن می توانند بیشتر از یک مقدار را دریافت کند، که همگی آن ها نیز با استفاده از یک کاما (,) از هم جدا می شوند، و به همین خاطر شما می توانید به راحتی چندین ترانزیشن را در هر لحظه انجام دهید.

مثال

button {

    background: #fd7c2a;

    border: 3px solid #dc5801;

    /* For Safari 3.0+ */

    -webkit-transition-property: background, border;

    -webkit-transition-duration: 1s, 2s;

    /* Standard syntax */

    transition-property: background, border;

    transition-duration: 1s, 2s;

}

button:hover {

    background: #3cc16e;

    border-color: #288049;

}

 

کوتاه نویسی ویژگی های ترانزیشن شده

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

ویژگی ترانزیشن یک ویژگی کوتاه نویسی شده برای تمام ویژگی های ترانزیشن منفرد است که به ترتیب شامل ویژگی های : transition-property، transition-duration، transition-timing-function و transition-delay می شود که همه را می توانید به راحتی و در یک خط کد وارد کنید.

در اینجا به یاد داشته باشید که ترتیب وارد کردن این ویژگی ها باید به ترتیب اول transition-property، دوم transition-duration، سوم transition-timing-function و چهارم transition-delay باشد.

مثال

button {

    background: #fd7c2a;

    -webkit-transition: background 2s ease-in 0s; /* For Safari 3.0+ */

    transition: background 2s ease-in 0s; /* Standard syntax */

}

button:hover {

    background: #3cc16e;

}

نکته

اگر هر مقداری در اینجا حذف شود و یا تعریف نشود، مقدار پیش فرض برای آن در نظر گرفته می شود و در طول اجرای برنامه از آن استفاده می شود. این به معنای آن است که اگر مقداری برای ویژگی مانند transition-duration وارد نکنید و یا این مقدار حذف شود، هیچ ترانزیشنی رخ نمی دهد، زیرا مقدار پیش فرض برای آن برابر با صفر است.

ویژگی های ترانزیشن ها در CSS3

در جدولی که در ادامه می آید یک لیست خلاصه شده از تمام ویژگی های ترانزیشن برای شما آورده شده است:

ویژگی توضیحات
transition یک شکل کوتاه نویسی شده برای تمام تنظیماتی است که در خود چهار ویژگی دیگر را دارد، و می توان تمام چهار ویژگی دیگر را با این طریق تنها در یک خط کد وارد کد که هم سبب کوتاه شدن کد و هم سبب کنترل بهتر ترانزیشن ها می شود.
transition-delay این ویژگی سبب می شود که مقداری تاخیر در ابتدای شروع ترانزیشن در نظر گرفته شود و بعد حرکت شروع شود.
transition-duration این ویژگی مدت انجام یک ترانزیشن را بر حسب میلیونیم ثانیه و یا ثانیه نشان می دهد که بعد از سپری شدن این بازه زمانی ترانزیشن ما کامل خواهد شد.
transition-property این ویژگی نام ویژگی هائی در CSS که باید ترانزیشن بر روی آن ها اتفاق بیتفد را مشخص می کند.
transition-timing-function این ویژگی نحوه کار تابع ترانزیشن را تعریف می کند در اینجا الگوهای مختلفی وجود دارند که می توانند نحوه انیمیشن شدن یک ترانزیشن را کنترل کنند که در جای خود مفصل به آن پرداخته ایم.

No votes yet.
Please wait...

دیدگاهتان را بنویسید

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

منو اصلی

question