will-change הוא מאפיין חדש יחסית בCSS שמטרתו ליידע את הדפדפן שאחד המאפיינים האחרים באלמנט מסוים עומד להשתנות ולאפשר לדפדפן להיערך לכך מראש ולבצע את האופטימיזציות המתאימות.
על ידי שימוש בwill-change נשיג שיפור בביצועי האנימציה, ותחושה חלקה יותר.
ובכן, למה זה לא קורה לבד? ראיתי כמה דיונים על הנושא הזה ויש הטוענים שהדפדפן צריך להיערך לבד ולהבין מה עתיד להשתנות. מצד שני, היערכות כזאת מראש דורשת משאבים ולכן נדרש כאן מהמפתח להוסיף את המאפיין הזה רק כמה מאיות השניה לפני שפרמטר משתנה – כך הדפדפן לא צריך להיערך מראש לכל השינויים האפשריים בדף.
אז איך משתמשים בזה?
נגדיר קלאס וניתן לו כמה מאפיינים:
.box p{
opacity: 0.5;
transform: scale(1);
}
בשורה 2 אנחנו מגדירים את המצב הראשוני של המאפיין opacity ובשורה 3 את המצב הראשוני של transform לפסקה שנמצאת בתוך המחלקה box.
בקטע הקוד הבא, אנחנו מכינים את הדפדפן שבמחלקה box יש 2 מאפיינים שעתידים להשתנות הראשון הוא transform והשני הוא opacity. שימו לב: ההכנה מתבצעת כשהמשתמש עובר עם העכבר על box ולכן יתכן שעוד מעט הוא יעבור גם על הפסקה – מה שיפעיל את השינוי.
.box:hover p{
will-change: transform, opacity;
}כעת יש לדפדפן מצב ראשוני של 2 מאפיינים אבל הוא "יודע" שהמצב הזה עתיד להשתנות ולכן ברגע שהמשתמש נכנס עם העכבר אל box הדפדפן מכין את עצמו לקראת השינוי. השינוי עצמו מתבצע רק אחרי שהמשתמש עובר עם העכבר על הפסקה שנמצאת בתוך box. בקטע הקוד הבא נגדיר את השינוי במאפיינים.
.box p:hover {
opacity: 1;
transform: scale(2);
}
בדוגמה שבחרתי להציג כאן אין שינוי ויזואלי משמעותי שמצריך הכנה, אבל זוהי הדגמה בלבד. ההכנה משמעותית יותר כשמדובר באנימציות, תלת מימד וכדו'.