آموزش کامل کار با ویژگی Transition در CSS3

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل کار با ویژگی Transition در CSS3 با من همراه باشید.

آموزش کامل کار با ویژگی Transition در CSS3

Free-Learn

کار با ویژگی Transition در CSS3

ویژگی transition یا در لغت انتقال یا خودمونی ترنزیشن ، یکی از ویژگی هایی است که در CSS نسخه ۳ اضافه شده است و با استفاده از آن میتوان عناصر را در یک صفحه وب انتقال (منتقل) داد .

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

پس بطور کلی به هرگونه حرکتی ، انتقالی در یک صفحه وب که بتونه با جلوه های خاصی نیز همراه شود میتواند توسط ویژگی transition ایجاد و مورد استفاده قرار بگیرد.

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

  • Transition-Delay : مدت زمانی برای شروع و پایان عمل انتقال
  • Transition-Duration : مدت زمانی برای عمل انتقال
  • Transition-Property : اون ویژگی که باید مورد عمل انتقال قرار بگیرد
  • Transition-Timing-Function : تابعی برای انجام عمل انتقال

Free-Learn

عدم پشتیبانی برخی از مرورگرها از ترنزیشن ها + نحوه رفع مشکل

تمامی ویژگی هایی که در لیست بالا مشاهده مینمایید در برخی از مرورگرهای اینترنتی در حالت عادی پشتیبانی نمی شوند ، لذا ما باید از یه تکه کد مخصوص استفاده نماییم تا اون مرورگرها بتونن از اون ویژگی ها پشتیبانی کنند.

اینکه میگم برخی از مرورگرها ، منظورم از نسخه های قدیمی این مرورگرهاست، مثلا نسخه ۴ مرورگر فایرفاکس قدرت پشتیبانی از این ویژگی هارو نداره در نتیجه ما باید از اون تکه کدی که گفتم استفاده نماییم.

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

نام ویژگی Chrome Firefox Opera Safari IE
transition ۲۶٫۰ ۱۶٫۰ ۱۲٫۱ ۶٫۱ ۱۰٫۰
transition-delay ۲۶٫۰ ۱۶٫۰ ۱۲٫۱ ۶٫۱ ۱۰٫۰
transition-duration ۲۶٫۰ ۱۶٫۰ ۱۲٫۱ ۶٫۱ ۱۰٫۰
transition-property ۲۶٫۰ ۱۶٫۰ ۱۲٫۱ ۶٫۱ ۱۰٫۰
transition-timing-function ۲۶٫۰ ۱۶٫۰ ۱۲٫۱ ۶٫۱ ۱۰٫۰

رفع مشکل عدم پشتیبانی

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

نام مرورگر Chrome Firefox Opera Safari
دستور پیشوندی -webkit- -moz- -o- -webkit-

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

Free-Learn

کار با ویژگی Transition-Delay در CSS3

با استفاده از این ویژگی میتوان مدت زمانی را برای شروع عمل انتقال مشخص کرد، یعنی مثلا ۲ ثانیه طول بکشد تا که عمل انتقال شروع شود.

مقداری که این ویژگی میپذیرد از نوع تایم یا Time می باشد، یعنی یک عدد بهمراه پسوند s یعنی ثانیه و ms یعنی میلی ثانیه، مثلا ۵ ثانیه رو باید اینجوری بنویسیم » ۵s

  • ۱s : یعنی ۱ ثانیه
  • ۱ms : یعنی ۱۰۰۰ میلی ثانیه

مرورگرهای مدرن امروزی معمولا بطور کامل از این ویژگی پشتیبانی میکنند.

مثال :

امتحان کنید

Free-Learn

کار با ویژگی Transition-Duration در CSS3

در ادامه ی آموزش کار با ویژگی Transition در CSS3 میخوایم با ویژگی Transition-Duration در این زبان آشنا شویم، و ببینیم عملکرد این ویژگی چگونه می باشد.

علاوه بر مدت زمانی که میتونیم برای شروع عمل انتقال مشخص نماییم، یه مدت زمان هم میخوایم برای اجرای عمل انتقال ، یعنی مثلا بگیم ۳ ثانیه طول بکشه که فلان عنصر از این نقطه به آن نقطه برود.

مقداری که این ویژگی میپذیرد نیز از نوع تایم یا Time می باشد، یعنی یک عدد بهمراه پسوند s یعنی ثانیه و ms یعنی میلی ثانیه، مثلا ۳ ثانیه رو باید اینجوری بنویسیم » ۳s و اگه مثلا بخوام ۳ ثانیه رو بصورت میلی ثانیه بنویسیم باید اینجوری نوشت » ۳۰۰۰ms

  • ۱s : یعنی ۱ ثانیه
  • ۱ms : یعنی ۱۰۰۰ میلی ثانیه

مثال :

امتحان کنید

Free-Learn

کار با ویژگی Transition-Property در CSS3

با استفاده از این ویژگی میتوانیم مشخص کنیم که کدام ویژگی یک عنصر تحت تاثیر عمل انتقال قرار بگیرد، مثلا بگیم وقتی ماوس بروی عنصر رفت اندازه عرضش ( یعنی ویژگی width ) تحت تاثیر عمل انتقال قرار بگیرد.

این ویژگی مقادیر زیر را میتواند بپذیرد :

  • none : هیچ ویژگی ای از عنصر تحت تاثیر نباشد
  • all : همه ی ویژگی های یک عنصر تحت تاثیر قرار بگیرد
  • property : نام اون ویژگی ای که قراره تحت تاثیر قرار بگیرید

مثال شماره ۱ : استفاده از ۱ ویژگی که قرار است تحت تاثیر عمل انتقال قرار بگیرند

امتحان کنید

مثال شماره ۲ : استفاده از چندین ویژگی که قرار است تحت تاثیر عمل انتقال قرار بگیرند

امتحان کنید

مثال شماره ۳ : استفاده از مقدار all – یعنی تمامی ویژگی های اون عنصر تحت تاثیر عمل انتقال قرار بگیرند

امتحان کنید

Free-Learn

کار با ویژگی Transition-Timing-Function در CSS3

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

این ویژگی مقادیر زیر را میتواند بپذیرد :

  • linear : عمل انتقال را بصورت خطی و پیوسته اجرا میکند
  • ease-in : شروعش کمی با تاخیر می باشد
  • ease-out : پایانش کمی با تاخیر می باشد
  • ease-in-out : شروع و پایانش کمی با تاخیر می باشد
  • steps(int,start|end) :  تکه تکه کردن انتقال از شروع یا پایان
  • cubic-bezier(0-1,0-1,0-1,0-1) : استفاده از منحنی بزیر یک مقدار از ۰ تا ۱

مثال : در مثال زیر میتوانید هر یک از مقادیر بالا را نحوه استفاده شون رو مشاهده نمایید.

امتحان کنید

Free-Learn

خلاصه نویسی ویژگی Transition در CSS

تا الان اگه فری لرن رو دنبال کرده باشید میدونید که خلاصه نویسی یعنی چی و برای چی استفاده میشه! ولی اگه برای اولین بار هست وارد سایت بنده می شوید الان میگم که خلاصه نویسی برای چیه.

خلاصه نویسی یعنی اینکه ما بیایم و تمامی ویژگی های یک عنصر رو در یک خط کد بنویسیم بصورت خلاصه ، خب اینجوری هم از نظر خوانایی و هم اینکه حجم کدهامون کم باشه خیلی بهتره.

شکل کلی نحوه استفاده از این ویژگی بصورت زیر می باشد :

  • property : اون ویژگی که قراره تحت تاثیر قرار بگیره
  • duration : مدت زمانی که باید طول بکشه تا انتقال انجام بشه
  • timing-function : منحنی سرعت انتقال را مشخص میکند
  • delay : مدت زمانی که باید طول بکشه تا انتقال شروع بشه

خب من همه ی ویژگی های بالارو بطور کامل دونه به دونه کمی بالاتر آموزش دادم، حال در ادامه میخوایم نحوه خلاصه نویسی ویژگی transition را یاد بگیریم.

مثال شماره ۱ :

امتحان کنید

مثال شماره ۲ :

امتحان کنید

مثال شماره ۳ : با ویژگی delay

امتحان کنید

مثال شماره ۴ : تغییر اندازه باکس متن ( عنصر ورودی از نوع Input ) وقتی که ماوس روش فوکوس میشه

امتحان کنید

خب دوستان عزیز خسته نباشید اینم از پایان آموزش کامل کار با ویژگی Transition در CSS3 ، امیدوارم که هیچ مشکلی در این آموزش نداشته باشید ولی اگه مشکلی هم هست لطفا از طریق پرسش و پاسخ CSS حتما مشکلتان را مطرح نمایید.

Free-Learn

دریافت PDF یا پرینت این مطلب