میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

Transition در CSS

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

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

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

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

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

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


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

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

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

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

نام ویژگیChromeFirefoxOperaSafariIE
transition۲۶٫۰۱۶٫۰۱۲٫۱۶٫۱۱۰٫۰
transition-delay۲۶٫۰۱۶٫۰۱۲٫۱۶٫۱۱۰٫۰
transition-duration۲۶٫۰۱۶٫۰۱۲٫۱۶٫۱۱۰٫۰
transition-property۲۶٫۰۱۶٫۰۱۲٫۱۶٫۱۱۰٫۰
transition-timing-function۲۶٫۰۱۶٫۰۱۲٫۱۶٫۱۱۰٫۰

 

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

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

نام مرورگرChromeFirefoxOperaSafari
دستور پیشوندی-webkit--moz--o--webkit-

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


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

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

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

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

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

مثال :

div {
transition-delay: 2s;
}

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

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

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

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

و اگه مثلا بخوام ۳ ثانیه رو بصورت میلی ثانیه بنویسیم باید اینجوری نوشت » ۳۰۰۰ms

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

مثال :

 

div {
transition-duration: 3s;
}

 


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

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

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

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

 

 

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

 

div {
transition-property: width;
}

 

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

 

div {
transition-property: width,background-color;
}

 

 

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

div {
transition-property: all;
}

 


کار با ویژگی 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) : استفاده از منحنی بزیر یک مقدار از ۰ تا ۱

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

div.t1{
transition-timing-function:linear;
}


div.t2{
transition-timing-function:ease-in;
}


div.t3{
transition-timing-function:ease-out;
}


div.t4{
transition-timing-function:ease-in-out;
}


div.t5{
transition-timing-function:steps(5,start);
}


div.t6{
transition-timing-function:cubic-bezier(0,0,0.58,1);
}

 

 


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

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

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

 

transition: property|duration|timing-function|delay ;

 

 

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

 

مثال شماره ۱ :

 

div{
transition: width 0.6s ease-in;
}

 

مثال شماره ۲ :

 

div{
transition: all 0.6s ease-in-out;
}

 

 

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

 

div{
transition: all 0.6s ease-in-out 0.3s;
}

 

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

 

input[type="text"]{
width:130px;
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}


input[type="text"]:focus {
width: 250px;
background-color:#F44336;
color:#fff;
}

 


امیدواریم آموزش Transition در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

csstransition css شرحTransition در CSStransition در css چیستtransition في csstransition ها در cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کار با transition در cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل transition در cssآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfخاصیت transition در cssخصوصیت transition در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکار با transition در cssکاربرد transition در cssکتاب آموزش css فارسی
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟