להחליף, להוסיף או לצבור? זאת השאלה.
שילוב של מספר אפקטים של אנימציה
המאפיין animation-composition מאפשר לקבוע מה צריך לקרות כשכמה אנימציות משפיעות בו-זמנית על אותו נכס.
נניח שהחלת הטרנספורמציה הבסיסית הבאה על רכיב:
transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);
יש גם את הקבוצה הזו של תמונות מפתח:
@keyframes adjust {
to {
transform: translateX(100px);
}
}
כשמחילים את תמונות המפתח האלה על רכיב, הערך transform בתמונת המפתח to מחליף את הקיים transform. זאת התנהגות ברירת המחדל.
עם animation-composition, יש לך עכשיו שליטה על מה שצריך לקרות במקום replace ברירת המחדל. הערכים הקבילים הם:
replace: ערך האפקט מחליף את הערך הבסיסי. (ברירת המחדל)add: ערך האפקט יתווסף לערך הבסיסי.accumulate: ערך האפקט משולב עם הערך הבסיסי.
ההבדל בין חיבור לצבירה הוא דק. לדוגמה, ניקח את שני הערכים blur(2) ו-blur(3). אם תחברו אותו יחד, המערכת תייצר blur(2) blur(3), אבל אם תצברו אותו - הוא יפיק blur(5).
אפשר להשוות את הנתון הזה לכוס שמלא בתה. כאשר מוזגים לתוכו חלב:
replace: התה יוסר ומוחלף בחלב.add: החלב מתווסף לכוס, אבל הוא נשאר בשכבות מעל לתה.accumulate: החלב מתווסף לתה, ובגלל ששניהם נוזלים, הם מתערבבים יפה.
הדגמה (דמו)
בהדגמה שלמטה מופיעות שלוש תיבות אפורות שעליהן חלות הבסיס transform ו-animation.
למרות שהתיבות האלה מכילות את אותה אנימציה, הן מניבות תוצאה שונה כי יש להן קבוצה אחרת של animation-composition:
התיבה הראשונה מוגדרת לערך animation-composition: replace. זאת התנהגות ברירת המחדל. במיקום הסיום, הערך המקורי של translateX(50px) rotate(45deg) של transform מוחלף ב-translateX(100px).
התיבה השנייה מוגדרת לערך animation-composition: add. במיקום הקצה, translateX(100px) מתווסף ל-translateX(50px) rotate(45deg) המקורי, וכתוצאה מכך מתקבל translateX(50px) rotate(45deg) translateX(100px). הפעולה הזו תזיז את הקופסה ב-50 פיקסלים, סיבוב של 45 מעלות ואז הזזתה ב-100 פיקסלים.
התיבה השלישית מוגדרת לערך animation-composition: accumulate. במיקום הסופי, translateX(100px) יתווסף באופן מתמטי ל-translateX(50px) מהטרנספורמציה המקורית, והתוצאה תהיה טרנספורמציה של translateX(150px) rotate(45deg).