تحكم أكثر دقة في عمليات تحويل CSS مع خصائص التحويل الفردية

تحويل العناصر باستخدام السمات translate وrotate وscale

Bramus

L. David Baron

خاصية transform في CSS

لتطبيق عمليات التحويل على عنصر، استخدِم سمة transform في CSS. يقبل الموقع <transform-function> واحدًا أو أكثر يتم تطبيقه الواحد تلو الآخر.

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

يتم نقل العنصر المستهدَف بنسبة% 50 على محور X، ويتم تدويره بمقدار 30 درجة، ثم توسيعه بنسبة %120.

على الرغم من أنّ السمة transform تؤدي وظيفتها على أكمل وجه، إلا أنّها تصبح مملة بعض الشيء عندما تريد تغيير أيّ من هذه القيم بشكلٍ فردي.

لتغيير المقياس عند التمرير بمؤشر الماوس، عليك تكرار جميع الدوال في سمة التحويل، حتى لو بقيت قيمها بدون تغيير.

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

خصائص التحويل الفردية

إنّ الخصائص الفردية لعمليات التحويل في CSS هي الخصائص التي يتم إرسالها مع الإصدار 104 من Chrome. السمات هي scale وrotate وtranslate، ويمكنك استخدامها لتحديد هذه الأجزاء من عملية التحويل بشكلٍ فردي.

وبهذا الإجراء، ينضم Chrome إلى Firefox وSafari اللذَين يتيحان هذه السمات حاليًا.

عند إعادة كتابة مثال 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.

جزء من سلسلة التفاعل التفاعلي الجديد