آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

خاصیت Transition در CSS3

دوره های مرتبط با این مقاله

خواص Transitions در CSS3

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

چگونه می توان از خواص Transition در CSS3 استفاده کرد ؟

به منظور ایجاد جلوه یا افکت transition, ابتدا باید دو چیز را مشخص کنید :
خاصیت (property) که می خواهید جلوه یا ایفکت دلخواه را به آن اضافه کنید
مدت زمانی که ایفکت طول می کشد (انتقال از یک حالت به حالت دیگر صورت می گیرد)

توجه:

چنانچه مدت زمان انجام انتقال (transition) تعیین نشده باشد, transition هیچ تاثیری نخواهد داشت زیرا که مقدار پیش فرض (زمان پیش فرض) 0 است .

مثال زیر یک المان قرمز رنگ div 100px * 100px نشان می دهد . المان div همچنین یک ایفکت transition برای خاصیت width مشخص کرده است که به مدت 2 ثانیه طول می کشد .

                
                    div {
                    width: 100px;
                    height: 100px;
                    background: red;
                    -webkit-transition: width 2s; /* Safari */
                    transition: width 2s;
                    }
                

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

     
                    div:hover {
                    width: 300px;
                    }
                

تنظیم همزمان چندین تغییر در Transition (چندین مقدار property را به طور همزمان تغییر دهید)

مثال زیر یک افکت transition برای هر دو خاصیت width و height اضافه می کند که به مدت 2 ثانیه طول می کشد .

                    div {
                    -webkit-transition: width 2s, height 4s; /* Safari */
                    transition: width 2s, height 4s;
                    }
                

نمودار سرعت (speed curve) را برای transition ( ایفکت تغییر حالت) مشخص کنید

خاصیت transition-timing-function نمودار سرعت transition (ایفکت تغییر حالت) را مشخص می کند (سرعت انجام تغییر حالت عنصر را در محدوه ی زمانی تعیین شده برای آن تعریف می کند) .
خاصیت نام برده می تواند مقادیر زیر را داشته باشد :

  • ease – ایفکت تغییر حالت با سرعت آرام آغاز می گردد, سپس تند می شود و در نهایت مجدداً کند شده و به پایان می رسد (حالت پیش فرض) .
  • Linear – ایفکت را با سرعتی یکنواخت آغاز کرده و به پایان می رساند .
  • Ease-in – ایفکت transition را با سرعتی کند و آرام آغاز می کند .
  • ease-out – ایفکت transition را با سرعتی کند به اتمام می رساند .
  • ease-in-out – ایفکت transition را با سرعتی کند آغاز کرده و خاتمه می دهد .
  • cubic-bezier(n,n,n,n) – به شما امکان می دهد مقادیر خود را در تابع cubic-bezier تعریف کنید .

مثال زیر نمودارهای سرعت مختلفی را برای استفاده نمایش می دهد :

                    #div1 {transition-timing-function: linear;}
                    #div2 {transition-timing-function: ease;}
                    #div3 {transition-timing-function: ease-in;}
                    #div4 {transition-timing-function: ease-out;}
                    #div5 {transition-timing-function: ease-in-out;}
                

به تأخیر انداختن ایفکت تغییر حالت (transition) با خاصیت transition-delay

transition-delay مشخص می کند اجرای ایفکت انیمیشن بعد از چند ثانیه تاخیر شروع شود یا خیر, به عبارت دیگر تاخیری بر حسب ثانیه برای ایفکت transition تعریف می کند .
در مثال زیر مشاهده می کنید که ایفکت با یک ثانیه تاخیر آغاز می گردد :

                  
                    div { 
                        -webkit-transition-delay: 1s; /* Safari */ 
                        transition-delay: 1s; 
                    }
                

Transition + Transformation

مثال زیر یک transformation (ایفکت تغییر وضعیت نمایش) به ایفکت transition اضافه می کند :

   
                    div {
                    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
                    transition: width 2s, height 2s, transform 2s;
                    }
                

مثال های کاربردی بیشتر در زمینه ی ایفکت transtion

می توان یک خاصیت های transition را به صورت تکی مقداردهی و مشخص کرد, به ترتیب زیر :

       
                    div {
                    transition-property: width;
                    transition-duration: 2s;
                    transition-timing-function: linear;
                    transition-delay: 1s;
                    }
                

یا همه ی آن ها را در یک تعریف (با استفاده از خاصیت مختصرنویسی transition) مقداردهی کرد, بدین ترتیب :

      
                    div {
                    transition: width 2s linear 1s;
                    }
                

خاصیت های transition به صورت خلاصه :

خاصیت
شرح
transition
تمامی خاصیت های transition را در یک خاصیت واحد تنظیم و مقدار دهی می کند
transition-delay
بعد از چه مدت زمانی، انتقال شروع شود. مقدار پیشفرض 0 است
transition-duration
مدت زمانی که طول می کشد (ثانیه یا هزارم ثانیه) ایفکت transition به اتمام برسد را تعیین می کند
transition-property
تعریف کننده ی خاصیتی است که در طی پروسه ی انیمیشن در المان از یک مقدار اولیه به مقدار ثانویه تغییر خواهد کرد (اسم آن خصوصیتی CSS که ایفکت transition برای آن تعریف می شود را مشخص می کند)
transition-timing-function
سرعت انجام ایفکت transition را تنظیم می کند (نحوه و سرعت اجرای انیمیشن را تعریف می کند)
  • 5755
  •    1366
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .