שליטה ברמת פירוט גבוהה יותר על טרנספורמציות CSS עם מאפייני טרנספורמציה נפרדים

אפשר לשנות אלמנטים באמצעות המאפיינים translate, rotate ו-scale

Bramus

L. David Baron

נכס ה-CSS transform

כדי להחיל המרות על רכיב, צריך להשתמש במאפיין 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 */
}

מאפייני הטרנספורמציה הנפרדים

משלוח באמצעות Chrome 104 הוא מאפיינים נפרדים להמרות CSS. המאפיינים הם scale, rotate ו-translate, ואפשר להשתמש בהם כדי להגדיר בנפרד את החלקים האלה של הטרנספורמציה.

כך, Chrome מצטרף ל-Firefox ו-Safari, שכבר תומכים בנכסים האלה.

אם תשכתבו את הדוגמה הקודמת (transform) עם הנכסים הספציפיים, קטע הקוד יהיה זה:

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

ענייני הסדר

אחד ההבדלים העיקריים בין נכס ה-CSS המקורי transform לבין הנכסים החדשים הוא הסדר שבו מוחלות הטרנספורמציות שהוצהרו.

בעזרת 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.

חלק מהסדרה החדשה של יכולת פעולה הדדית