Transition در CSS | ایجاد تاخیر در افکت‌های CSS
در این جلسه قصد داریم به سراغ مبحث Transition در CSS برویم. در جلسات قبلی با مفهوم transformها آشنا شدید در این جلسه بحث transition می‌تواند به تکمیل این مبحث بسیار کمک کند. پس پیشنهاد می‌کنم قبل از مطالعه‌ی این جلسه، به مباحث دو درس زیر کاملاً مسلط باشید:
معرفی hover در شبه کلاس‌ها
معرفی transformها در CSS
کاربرد Transition در CSS
از ویژگی Transition برای ایجاد حرکات نرم در طی زمان مشخص استفاده می‌شود. در واقع از این دستور استفاده می‌شود تا تغییرات عناصر به صورت نرم در طول یک بازه‌ی زمانی مشخص باشد. کاربرد اصلی این دستور زمانی است که میخواهیم تغییراتی را به یک عنصر اعمال کنیم.
فرض کنید می‌خواهید برای یک عنصر از ویژگی hover استفاده کنید تا وقتی اشاره‌گر موس روی آن عنصر رفت یک تغییر رنگ رخ دهد. در حالت عادی به کمک hover این موضوع امکان پذیر است اما تغییرات به یکباره انجام می‌شود که اصلا جذاب نیست. برای رفع این مشکل از دستور Transition استفاده می‌کنیم تا این تغییر به نرمی انجام شود. [در ادامه درس خروجی دستور transition در hover را مشاهده خواهید کرد.]
نحوه استفاده از Transition
1 2 3 | button { transition: background-color 0.5s; } |
در دستور بالا گفته شده تغییرات مربوط به رنگ پس‌زمینه درطول 0.5 ثانیه اجرا شود. که خروجی آن را در دکمه‌ی زیر مشاهده می‌کنید:
به من اشاره کن!
نمونه کد بالا حالت بسیار ساده از این دستور بود. زیرا در مقابل ویژگی Transition میتوان همزمان از ۴ مقدار استفاده کرد:
- transition-property: ویژگی و دستوری که باید transition روی آن اجرا شود.مثال width
- transition-duration: مدت زمان دوره transition مثال 2s
- transition-timing-function: برای تعیین سرعت تغییرات میتوان از حالت‌های مختلفی استفاده کرد.
- transition-delay: تاخیر برای شروع زمان اجرا دستور transition
در ادامه راجع به هر ۴ ویژگی مثالی را مشاهده می‌کنیم اما از میان آنها transition-timing-function کمی به توضیح بیشتر احتیاج دارد که به همین دلیل در بخش بعدی به طور مفصل‌تر به آن می‌پردازیم.
از ویژگی‌های بالا به دو صورت میتوان استفاده کرد که هر دو خروجی یکسان دارند:
1 2 3 4 5 6 7 8 9 10 | div { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; } div { transition: width 2s linear 1s; } |
طبق کد بالا باید تغییرات مربوط به width در طی ۲ ثانیه به صوت یکنواخت (Linear) باشد و البته تغییرات بعد از یک ثانیه مکث اجرا شود.خروجی این کد را می‌توانید در این لینک مشاهده کنید.
transition-timing-function
در این ویژگی میتوان از مقادیر زیر استفاده کرد که هر کدام از این موارد شیوه تغییرات را تغییر می‌دهند. برای مثال در حالت پیش‌فرض تمام transitionها به صورت یکنواخت در دوره‌ی transition-duration انجام می‌شوند. اما میتوان به کمک این توابع این حالت یکنواخت را تغییر داد. برای مثال گفت سرعت تغییرات در ابتدا سریع باشد و بعد به مرور کند شود.
- ease: تغییرات در ابتدا کند هستند در میانه راه سریع می‌شوند و در انتها کند
- linear: در تمام طول دوره سرعت یکسان
- ease-in: تغییرات در شروع کند می‌شوند.
- ease-out: تغییرات در انتها کند می‌شوند.
بررسی یک مثال کامل از transition
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | a { background-color: #139CFF; color:white; padding: 10px; border-radius: 7px; display: inline-block; font-family: helvetica; transition: background-color .5s, color .5s linear, border-radius 2s ease-out; } a:hover { background-color: #35EC5C; color: black; border-radius: 30px; } |
توجه کنید که مانند نمونه کد بالا میتوان همزمان از چند transition مختلف استفاده کرد به این شرط که آنها را به کمک (,) جدا کنید.
در کد بالا برای hover همزمان سه افکت در نظر گرفته شده از جمله: تغییر رنگ، تغییر بک‌گراند و گرد شدن دور دکمه. اما با هاور کردن دکمه همه‌ی افکت‌ها به یک باره اعمال نمی‌شوند و آن هم به دلیل استفاده کردن از transition است.
مثالی از transform + transition
همانطور که در ابتدای مقاله گفته شد کاربرد transition در کنار Transformها اغلب ضروری است. برای نمونه می‌توانید به مثال زیر مراجعه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 | .BOX { width: 100px; height: 100px; background: red; transition: width 2s, height 2s, transform 2s; } .BOX:hover { width: 300px; height: 300px; transform: rotate(180deg); } |
خب دوستان من! مطالعه کافیست. بهتر است همین الان به عنوان یک تمرین یک فایل html ایجاد کنید و از کدهای بالا برای یک عنصر با کلاس box استفاده کنید. این‌بار خروجی کار را شما بگویید!
ممنون ازتون ، آموزش کاملی بود،
فقط من وقتی کدها رو مینویسم زمانیکه میخوای transition -property را مشخص کنیم آن را در تک کوتیشن باید قرار بدم وگرنه که اعمال نمیشه !!! /:
اگر در فایل CSS قرار بدید و مشابه نمونه بنویسید مشکلی نخواهد داشت.
سلام
ممنونم بابت این اموزش کامل
ممنون از شما بابت ارسال دیدگاهتون
سلام
اول از همه تشکر از آموزش خوبتون
دوم میخواستم اینو بگم٬ وقتی که میخوام با تگ a کار کنم٬ زیر عنوانی که برای تگ مینویسم (برای مثال: اینجا را کلیک کنید) یک خط زیر عنوان میفته که من نمیخوام بیفته میشه بگید چجوری اون رو از بین ببرم ؟
به کمک css:
a {
text-decoration: none !important;
}
ممنون عالی بود
سپاس از همراهی شما
ممنون از مطالب مفید ودقیق