Transition در CSS | ایجاد تاخیر در افکت‌های CSS


نویسنده:
سه شنبه ۸ مهر ۱۳۹۹
transition در css

در این جلسه قصد داریم به سراغ مبحث Transition در CSS برویم. در جلسات قبلی با مفهوم transformها آشنا شدید در این جلسه بحث transition می‌تواند به تکمیل این مبحث بسیار کمک کند. پس پیشنهاد می‌کنم قبل از مطالعه‌ی این جلسه، به مباحث دو درس زیر کاملاً مسلط باشید:

معرفی hover در شبه کلاس‌ها
معرفی transformها در CSS

کاربرد Transition در CSS

از ویژگی Transition برای ایجاد حرکات نرم در طی زمان مشخص استفاده می‌شود. در واقع از این دستور استفاده می‌شود تا تغییرات عناصر به صورت نرم در طول یک بازه‌ی زمانی مشخص باشد. کاربرد اصلی این دستور زمانی است که میخواهیم تغییراتی را به یک عنصر اعمال کنیم.

فرض کنید می‌خواهید برای یک عنصر از ویژگی hover‌ استفاده کنید تا وقتی اشاره‌گر موس روی آن عنصر رفت یک تغییر رنگ رخ دهد. در حالت عادی به کمک hover این موضوع امکان پذیر است اما تغییرات به یکباره انجام می‌شود که اصلا جذاب نیست. برای رفع این مشکل از دستور Transition استفاده می‌کنیم تا این تغییر به نرمی انجام شود. [در ادامه درس خروجی دستور transition‌ در hover را مشاهده خواهید کرد.]


نحوه استفاده از Transition

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

به من اشاره کن!

نمونه کد بالا حالت بسیار ساده از این دستور بود. زیرا در مقابل ویژگی Transition می‌توان همزمان از ۴ مقدار استفاده کرد:

  • transition-property: ویژگی و دستوری که باید transition‌ روی آن اجرا شود.مثال width
  • transition-duration: مدت زمان دوره transition مثال 2s
  • transition-timing-function: برای تعیین سرعت تغییرات می‌توان از حالت‌های مختلفی استفاده کرد.
  • transition-delay: تاخیر برای شروع زمان اجرا دستور transition

در ادامه راجع به هر ۴ ویژگی مثالی را مشاهده می‌کنیم اما از میان آنها transition-timing-function کمی به توضیح بیشتر احتیاج دارد که به همین دلیل در بخش بعدی به طور مفصل‌تر به آن می‌پردازیم.

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

طبق کد بالا باید تغییرات مربوط به width در طی ۲ ثانیه به صوت یکنواخت (Linear) باشد و البته تغییرات بعد از یک ثانیه مکث اجرا شود.خروجی این کد را می‌توانید در این لینک مشاهده کنید.

transition-timing-function

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

  • ease: تغییرات در ابتدا کند هستند در میانه راه سریع می‌شوند و در انتها کند
  • linear: در تمام طول دوره سرعت یکسان
  • ease-in: تغییرات در شروع کند می‌شوند.
  • ease-out: تغییرات در انتها کند می‌شوند.


بررسی یک مثال کامل از transition

توجه کنید که مانند نمونه کد بالا می‌توان همزمان از چند transition مختلف استفاده کرد به این شرط که آنها را به کمک (,) جدا کنید.

 transition در css

در کد بالا برای hover همزمان سه افکت در نظر گرفته شده از جمله: تغییر رنگ، تغییر بک‌گراند و گرد شدن دور دکمه. اما با هاور کردن دکمه همه‌ی افکت‌ها به یک باره اعمال نمی‌شوند و آن هم به دلیل استفاده کردن از transition است.

مثالی از transform + transition

همانطور که در ابتدای مقاله گفته شد کاربرد transition‌ در کنار Transformها اغلب ضروری است. برای نمونه می‌توانید به مثال زیر مراجعه کنید:

خب دوستان من! مطالعه کافیست. بهتر است همین الان به عنوان یک تمرین یک فایل html‌ ایجاد کنید و از کدهای بالا برای یک عنصر با کلاس box استفاده کنید. این‌بار خروجی کار را شما بگویید!

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

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

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