transition season

ترنزیشن ها

یکی از جذاب ترین ویژگی های CSS امروز دنیای وب متحرک سازی عناصر در یک صفحه می باشد. ترنزیشن ها ساده ترین راه برای این کار هستند. در صفحات وب از CSS برای تغییر استایل از مقداری به مقدار دیگر استفاده می شود که این تغییر به صورت ناگهانی و فوری اتفاق می افتد, اضافه کردن ویژگی های ترنزیشن باعث می شود تا بیشتر آن تغییرات بصورت تدریجی در طول زمان اتفاق بیفتند و این امر باعث داشتن یک واسط کاربری جاندارتر و شادابتری می شود و تجربه کاربری موثرتری را به ارمغان خواهد آورد.

همچنین کارایی ترنزیشن ها در دنیای صفحات کوچک موبایل ها بسیار بالاست چرا که تغییرات ناگهانی در صفحه های کوچک چنین دستگاهایی باعث گمراهی کاربر می شود. این نوع متحرک سازی ها در CSS نیاز به تایمرهای سنتی جاوااسکریپتی ندارند و بسیار سریع تر از آن ها عمل می کنند.

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

ساخت متحرک سازی های پیچیده تر در CSS به وسیله انیمیشن ها انجام می شود که برای یادگیری این امر در مرحله اول باید با ترنزیشن ها به صورت کامل آشنا شده و بتوانیم به راحتی از آنها استفاده کنیم.

برای تعیین این موضوع که کدام ویژگی یک عنصر (یا تمام ویژگی های آن) تغییراتش با ترنزیشن همراه باشد از ویژگی transition-property استفاده می شود:

transition-property

transition-duration مشخص می کند چه مدت زمانی یک ترنزیشن به طول بیانجامد:

transition-duration

برای به وجود آوردن یک مکث قبل از انجام ترنزیشن از ویژگی transition-delay استفاده کنیم:

transition-delay

transition-timing-function به ما اجازه می دهد تا سرعت ترنزیشن را در طول اجرای آن کنترل کنیم:

transition-timing-function

و برای آشنایی با توابع کنترل سرعت با نوع داده ای <timing-function> آشنا خواهیم شد:

<timing-function>

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

transition

بعد از فراگیری تمام ویژگی های ترنزیشن, این مطلب نکات تکمیلی موضوع را بیان خواهد کرد:

نکات تکمیلی

 
 

2 دیدگاه برای “ترنزیشن ها

  1. خیلی عالی بود ممنون
    ببخشید برای استایل نوشته ها از چی استفاده می کنید ؟
    مثلا تو آموزش ساب لایم گفته بودین پیش نیاز : ساب لایم
    این یه تیکه تو کادر جدا بود مثلا کدها ی بالا
    ؟

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