کنترل دانه‌بندی دقیق‌تر روی تبدیل‌های CSS با ویژگی‌های تبدیل فردی

عناصر را با ویژگی های translate ، rotate و scale تبدیل کنید

براموس
ال دیوید بارون

ویژگی transform CSS

برای اعمال تبدیل به یک عنصر، از ویژگی transform CSS استفاده کنید. ویژگی یک یا چند <transform-function> را می پذیرد که یکی پس از دیگری اعمال می شوند.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

عنصر هدف 50% در محور X ترجمه می شود، 30 درجه می چرخد ​​و در نهایت تا 120% مقیاس می شود.

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

برای تغییر مقیاس در شناور، باید همه توابع را در ویژگی transform کپی کنید، حتی اگر مقادیر آنها بدون تغییر باقی بماند.

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

خصوصیات تبدیل فردی

ارسال با Chrome 104 ویژگی‌های منحصر به فردی برای تبدیل‌های CSS است. ویژگی‌ها scale ، rotate و translate هستند که می‌توانید از آنها برای تعریف جداگانه آن بخش‌های یک تبدیل استفاده کنید.

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

پشتیبانی مرورگر

  • 104
  • 104
  • 72
  • 14.1

منبع

با بازنویسی مثال transform قبلی با خصوصیات فردی، قطعه شما به این شکل می شود:

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

سفارش مهم است

یکی از تفاوت های کلیدی بین ویژگی transform اصلی CSS و ویژگی های جدید، ترتیب اعمال تبدیل های اعلام شده است.

با transform ، توابع تبدیل به ترتیبی که نوشته شده اند اعمال می شوند – از چپ (خارج) به راست (داخل).

با ویژگی‌های تبدیل فردی، ترتیب به ترتیبی نیست که آنها اعلام می‌شوند. ترتیب همیشه یکسان است: ابتدا translate (خارج)، سپس rotate ، و سپس scale (در داخل).

این بدان معناست که هر دو قطعه کد زیر نتیجه یکسانی دارند:

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

در هر دو مورد، عناصر هدف ابتدا 50% در محور X ترجمه می شوند، سپس 30deg می چرخند و در نهایت با 1.2 مقیاس می شوند.

اگر یکی از ویژگی‌های تبدیل منفرد به همراه یک ویژگی transform اعلام شود، آنگاه تبدیل‌های منفرد ابتدا اعمال می‌شوند ( translate ، rotate ، و سپس scale ) با transform آخر (در داخل). جزئیات بیشتر در مشخصاتی است که نحوه محاسبه ماتریس تبدیل را مشخص می کند.

تصاوير متحرك

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

نمودار فریم های کلیدی

استفاده از transform

برای پیاده سازی این انیمیشن با استفاده از transform ، باید تمام مقادیر بینابینی را برای همه تبدیل های تعریف شده محاسبه کنید و آن ها را در هر فریم کلیدی قرار دهید. به عنوان مثال، برای انجام یک چرخش در علامت 10٪، مقادیر سایر تبدیل ها نیز باید محاسبه شوند، زیرا ویژگی transform به همه آنها نیاز دارد.

نمودار فریم های کلیدی با مقادیر متوسط ​​محاسبه شده است.

کد CSS حاصل به این صورت می شود:

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

استفاده از خصوصیات تبدیل فردی

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

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

استفاده از خصوصیات تبدیل فردی و چندین فریم کلیدی

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

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

به لطف این تقسیم، می توانید هر مجموعه جداگانه ای از فریم های کلیدی را به دلخواه اعمال کنید زیرا ویژگی های transform - که اکنون به ویژگی های جداگانه تبدیل شده اند - دیگر روی یکدیگر بازنویسی نمی کنند. بالاتر از آن، می‌توانید بدون نیاز به بازنویسی کل قسمت، زمان‌بندی متفاوتی برای هر تغییر ایجاد کنید.

کارایی

انیمیشن‌هایی که از این ویژگی‌های جدید استفاده می‌کنند به اندازه انیمیشن‌های ویژگی transform موجود کارآمد هستند.

انیمیشن های translate ، rotate و scale بر روی کامپوزیتور به همان شیوه ای اجرا می شوند که انیمیشن های transform انجام می دهند، بنابراین آنها برای اجرای انیمیشن به همان شیوه transform خوب هستند.

این ویژگی‌های جدید با ویژگی will-change نیز کار می‌کنند. به طور کلی، بهتر است از استفاده بیش از حد will-change با استفاده از آن بر روی حداقل تعداد عناصر مورد نیاز، و تا حد امکان کوتاه مدت، اجتناب کنید. اما این نیز خوب است که تا حد امکان خاص باشید. برای مثال، اگر will-change برای بهینه‌سازی یک انیمیشن با ویژگی‌های rotate و filter استفاده می‌کنید، باید این را با استفاده از will-change: rotate, filter . این کمی بهتر از استفاده از will-change: transform, filter در موردی که در حال انیمیشن کردن rotate و filter هستید، زیرا برخی از ساختارهای داده ای که Chrome از قبل هنگام استفاده از will-change ایجاد می کند، برای transform در مقابل rotate متفاوت است.

بخشی از سری جدید قابلیت همکاری