سرخط خبرها

آموزش transition در CSS3

آموزش transition در CSS3

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

اما چگونه باید این کار را انجام دهیم؟ در نسخه‌ی جدید CSS یعنی CSS3 یک قابلیت با نام CSS Transition‌ اضافه شده است که کار آن دقیقا همین است. یعنی شما می‌توانید یک فاصله بین تغییری که قرار است ایجاد شود به وجود آورید.

با CSS3 ، بدون استفاده ازفلش یا جاوااسکریپت ، می توان برای تغییر از استایلی به استایل دیگر افکت هایی اضافه کرد. با استفاده از CSS Transitions شما می توانید بدون استفاده از فلش یا جاواسکریپت با hover المنت خود را از یک حالت به حالت دیگری تغییر دهید . 

خاصیت transition به همراه افکت هایی که با آن به کار می برید ، این امکان را به یک عنصر می دهد تا به صورت تدریجی از یک اندازه و شکل به یک اندازه و شکل دیگر تغییر وضعیت دهد

برای مثال فرض کنید ، شما یک عکس دارید که نمونه کوچک آن را بر روی صفحه قرار داده اید و قصد دارید تا زمانی که کاربر موس خود را بر روی آن می برد ، به صورت تدریجی به اندازه بزرگ و اصلی خود در بیاید و کاربر آن را مشاهده نماید . سپس هنگامی که کاربر موس خود را از روی آن می برد ، به انداز قبلی و کوچک خود بر گردد .
به وسیله خاصیت transition در CSS 3 ، می توانید تغییر اندازه ، شکل ،رنگ ، موقعیت و … یک عنصر را از یک حالت به یک حالت دیگر به صورت تدریجی و در قالب یک افکت تصویری ، انیمیشن سازی کنید .

برای این منظور شما بایستی ۳ مرحله زیر را انجام دهید :

  1. عنصری که می خواهید افکت تغییر وضعیت را روی انجام دهید ، انتخاب نمایید .
  2. تغییری که در عنصر می خواهید اعمال نمایید را به وسیله خواص CSS تعیین کنید . مثلا می خواهید اندازه یا رنگ یک عنصر را تغییر دهید .
  3. مدت زمان لازم برای انجام افکت و در صورت نیاز تاخیر قبل از اجرای آن را تعیین نمایید .

شکل کلی استفاده و ساختار دستوری خاصیت transition :

transition: property   duration   timing-function   delay ;
مثال : transition : width   ۲s   ease   ۱s ;

نکته مهم : خاصیت transition مخفف و ساده شده ۴ خاصیت زیر است .

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

 

شما می توانید این ۴ خاصیت را به صورت تک تک مقدار دهی کرده و یا اینکه چهار مقدار آنها را در این حالت کوتاه شده به ترتیب قرار دهید .

transition- property :

این پارامتر تعیین کننده خاصیتی است که شما می خواهید آن را در عنصر مورد نظرتان تغییر دهید . برای مثال این خاصت می تواند عرض عنصر ( خاصیت width ) یا رنگ آن ( خاصیت color ) باشد. در این دستور مشخص می‌کنیم کدام یک از ویژگی‌های عنصر باید در دستور کار این قابلیت قرار گیرند. شما می‌توانید فقط width یا height یا Background یا عبارات دیگر را در این دستور قرار دهید و اگر مقداری برای این دستور قرار ندهید، همه‌ی ویژگی‌های عنصرتان در دستور کار transition قرار خواهند گرفت.
تعیین این پارامتر اجباری است .

transition-duration : 

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

 

transition-timing-function : 

این پارامتر تعیین کننده افکت تصویری برای انجام عملیات است . شاید توضیح این قسمت کمی سخت باشد. با این دستور شما نحوه‌ی اعمال تغییرات در بازه‌ی زمانی داده شده را مشخص می‌سازید. یعنی ممکن است بخواهید که در تمام مدت تغییرات، سرعت تغییرات ثابت باشد بنابراین از دستور linear استفاده می‌کنید. اگر دوست داشته باشید در ابتدا کند، سپس تند شود از دستور ease-in و اگر خواستید بالعکس این قضیه باشد از ease-out استفاده می‌کنید

transition-delay : 

این پارامتر مدت زمان تاخیر انجام افکت ، پس از درخواست آن به مرورگر را تعیین می کند . با این دستور مشخص می‌سازید بعد از چه مدت عنصر شما شروع به تغییر کند.خاصیت transition-delay ، تعیین می کند اجرای افکت انیمیشن بعد از چند ثانیه تاخیر شروع شود یا خیر . این خاصیت بر مبنای میلی ثانیه ( ms ) یا ثانیه ( s ) تعیین شده و استفاده از آن اختیاریست . مقدار پیش فرض خاصیت transition-delay صفر است و به این معناست که انیمیشن بدون تاخیر اجرا خواهد شد .

برای مثال اگر ۳ ثانیه تعیین شود ، افکت پس از ۳ ثانیه فعال خواهد شد .

شکل کلی استفاده از خاصیت transition-delay به صورت زیر است :

transition-delay : time ;

 time : این پارامتر تعیین کننده مدت زمان تاخیر و اجرای انیمیشن بر حسب میلی ثانیه ( ms ) یا ثانیه ( s ) است .

 

پشتیبانی transition  در مرورگر های مختلف :

متاسفانه خاصیت transition در مرورگر IE پشتیانی نمی شود ( مگر در نسخه ۱۰ در آینده ) و توسط هیچ کدام از مرورگر های مطرح دیگر به صورت عادی پشتیانی نمی شود . برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها را استفاده نمود :

اینترنت اکسپلورر و اوپرا هنوز از تبدیل سه بعدی پشتیبانی نمیکنند ( آن ها فقط تبدیل دو بعدی را پشتیبانی میکنند ). 

مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد . برای پشتیانی این مرورگر باید خاصیت را به صورت moz-transition- بنویسید . 

مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند .اپرا برای این ویژگی نیاز به پیشوند -o- دارد . برای پشتیانی این مرورگر باید خاصیت را به صورت o-transition- بنویسید . 

مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت webkit-transition- بنویسید .

مثال : 

در مثال های عملی زیر سعی کرده ایم تا مطالب ارائه شده درباره خاصیت transition را به صورت عملی به شما نمایش داده ایم . دقت کنید که این مثال ها در مرورگر IE درست کار نمی کنند و برای هر مرورگر کد مربوط به آن قرار داده شده است :

می خواهیم با قرار گرفتن ماوس روی تگ دایو ، عرض تگ دایو را از ۱۰۰ پیکسل به ۳۰۰ پیکسل برسانیم

div
{
transition-property:width;
-moz-transition-property: width;
-webkit-transition-property:width; 
-o-transition-property:width; 
}

div:hover {width:300px;}

مثال بالا را کامل تر کرده تا تغییرات عرض تگ دایو در مدت ۲ ثانیه انجام شود

transition-duration: 2s;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s; 
-o-transition-duration: 2s; 

می خواهیم تغییرات در عرض تگ دایو ، با سرعت ثابت انجام شود

transition-timing-function: linear;
-moz-transition-timing-function: linear;
-webkit-transition-timing-function: linear; 
-o-transition-timing-function: linear; 

ایجاد تاخیر ۲ ثانیه ای قبل از اجرای تغییرات روی تگ دایو

transition-delay: 2s;
-moz-transition-delay: 2s; 
-webkit-transition-delay: 2s; 
-o-transition-delay: 2s; 

نکته : در اجرای برنامه زیر به ۲ ثانیه تاخیر توجه داشته باشید !!

div
{
transition: width 1s linear 2s;
-moz-transition:width 1s linear 2s;
-webkit-transition:width 1s linear 2s;
-o-transition:width 1s linear 2s;
}

 

QR Code For: آموزش transition در CSS3

درباره ی jizjiz

پاسخ دهید

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

Time limit is exhausted. Please reload CAPTCHA.