نکته های تکمیلی ترنزیشن در CSS

در مطالب قبل در مورد ویژگی های ترنزیشن صحبت شد, در اینجا قصد بیان نکته های تکمیلی این ویژگی را داریم.

تعریف ترنزیشن در وضعیت های مختلف یک عنصر

شاید تا الان به این نکته توجه نکرده باشید که برای یک عنصر می توانید در چند وضعیت متفاوت ترنزیشن های متفاوتی تعریف کنید. به عنوان مثال فرض کنید می خواهیم زمانی که یک لینک را hover: می کنیم رنگ آن در یک ثانیه و بصورت ease تغییر کند و زمانی که از حالت hover خارج می شود با زمان و شتاب متفاوت به حالت اولش بازگردد. برای این کار باید برای تمام وضعیت های این عنصر ( یعنی وضعیت عادی و وضعیت hover و غیره ) ویژگی های ترنزیشن را به صورت جداگانه تنظیم کرد:

a {
  background-color: #fff;
  color: #555;
  transition: all 2s ease;
}

a:focus {
  color: darkorange;
  background-color: #2b2b2b;
  transition-delay: .3s;
}

a:hover {
  color: darkorange;
  background-color: #2b2b2b;
  transition-duration: 0.3s;
  transition-timing-function: linear;
}

همانطور که مشاهده می کنید در سه وضعیت متفاوت, مقادیر متفاوتی برای ویژگی های مختلف ترنزیشن تعریف شده است. مثلا فقط در زمان focus: مکث داریم و یا در زمان hover: زمان ترنزیشن و همینطور سرعت آن به مقدار متفاوتی تغییر کرده است.

See the Pen bVMeGq by Mojtaba Seyedi (@seyedi) on CodePen.

اجرای ترنزیشن با اضافه کردن کلاس

منوهای off-canvas همگی با پیاده سازی این تکنیک ساخته می شوند. با کلیک بر روی یک کلید به وسیله جاوا اسکریپت کلاسی به یک عنصر اضافه می شود و حرکت رفت و برگشت آن عنصر به وسیله ترنزیشن ها کاربر پسندتر می شود. چون این بار هم خواسته ایم تا حرکت رفت و برگشت متفاوت باشند در این دو حالت مقادیر متفاوتی برای برخی از ویژگی های ترنزیشن تعریف شده است مثلا در حالت برگشت عنصر با سرعت خطی بر می گردد و همچنین با زمان متفاوت :

.content-wrapper { 
  transform: translate3d(0,0,0);
  transition: transform .1s linear;
}

.content-wrapper.open {
  transform: translate3d(-46px,0,0);
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

See the Pen dYeWda by Mojtaba Seyedi (@seyedi) on CodePen.

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

شاید برای شما سوال پیش بیاید که چرا در مثال قبل برای جابجا کردن عنصر از خاصیت های left و right و از این قبیل استفاده نکردیم؟ جواب این سوال را در بحث های آینده به طور مفصل بررسی خواهیم کرد اما در اینجا به صورت خلاصه پاسخ خواهیم داد.

مرورگرهای مدرن عملیات پردازش را برای برخی از ویژگی ها مثل ()translate3d در مقابل ویژگی هایی مثل left و right بجای CPU به GPU واگذار می کنند. که این امر باعث افزایش سرعت اجرا و کارایی عملکرد می شود. شاید تا الان به انیمیشن هایی برخورد کرده باشید که ظرافت اجرای خوبی ندارند و در مقابل ترنزیشن ها و انیمیشن هایی هستند که با عملکرد بسیار خوبی اجرا می شوند. این تفاوت در موبایل ها که قدرت پردازش کمتری دارند واضح تر است. پس تا جایی که امکان هست ( یعنی باید مراقب پشتیبانی مرورگرها با توجه به پروژه تان باشید. ) حتما در زمان متحرک سازی بوسیله ترنزیشن ها و انیمشن ها از ویژگی هایی مثل ()translate3d استفاده کنید.

پیشوندگذاری برای پشتیبانی بیشتر مرورگرها

برخی از مرورگرها برای پشتیبانی ترنزیشن نیاز به پیشوندگذاری دارند مثلا برای اینکه ترنزیشن ها در مرورگر سافاری 6.1 و یا اندروید 4.3 کارکنند باید با پیشوند -webkit- همراه باشند و یا برای فایرفاکس ورژن 4 تا 15 باید از پیشوند -moz- استفاده کنید.

-webkit-transition: transform .1s linear;
   -moz-transition: transform .1s linear;
     -o-transition: transform .1s linear;
        transition: transform .1s linear;

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