את הנושא של transition – המעברים החלקים בין שתי מצבים, נתחיל בכמה כללים בסיסיים.
מהו transition?
כשיש לנו אלמנט כלשהו, שיש לו שתי מצבים או יותר, ניתן לתת לו מעבר חלק בין המצבים.
דוגמאות:
- כפתור או קישור שמקבל אפקט מעבר עכבר ופוקוס
- כפתור שיש לו מצב פעיל (active)
- איזור שמתארך למשל במעבר עכבר, כדי להציג את כל התוכן שלו
- איזור שאמור להיות מוסתר ומוצג לחילופין
- טקסטים מעל סליידר, שנכנסים בעמעום ברגע שהשקופית שלהם מוצגת.
- שדה דרופדאון שנפתח ונסגר, וכן אם רוצים שהחץ שמסמן את הפתיחה והסגירה שלו יקבל אנימציה מסויימת כמו סיבוב.
לא משנה מתי קורית ההתחלפות בין המצבים, אם זה במעבר עכבר, בפוקוס או במצב אחר. ברגע שיש לנו יותר ממצב אחד ניתן להגדיר את השינוי ביניהם שלא יקרה ב"בום" – האלמנט היה מוסתר ועכשיו הוא מוצג, אלא שיקרה באיטיות – יוצג בעמעום. כנ"ל שינויי צבע, גודל, רקע, גודל פונט ועוד.
מבנה הפקודה transition
transition: color .5s .5s linear;ההגדרה הראשונה – מגדירה את המאפיין שעליו יתבצע המעבר החלק. האם המעבר יתבצע על צבע הפונט כמו בדוגמא, על שינוי ברוחב, ברמת השקיפות וכו'. לדוגמא כפתור אפור, שבמעבר עכבר צבעו מתחלף לשחור – הערך הראשון שנרצה לכתוב בפקודה יהיה background או background-color.
אציין רק שניתן להגדיר כמאפיין all, כך שהtransition המוגדר יחול על כל השינויים שמתבצעים על האלמנט.
ההגדרה השניה – מגדירה את משך הזמן שההתחלפות תיקח. 1s משמעו שניה אחת. .5s משמעו חצי שניה וכו'.
ההגדרה השלישית מגדירה את הדיליי שלפני ההתחלפות במידה ורוצים שההתחלפות לא תקרה בשניה שהיא אמורה לקרות. לדוגמא במעבר עכבר לא מיד יתחלף הצבע, אלא אחרי רבע שניה. או שדה דרופדאון שייסגר רק חצי שניה אחרי שלחצו על סגירה וכו'. שימוש נוסף הוא כשיש לנו שתי מאפיינים שמשתנים, ואנחנו רוצים שהם יקרו אחד אחרי השני.
ההגדרה הרביעית והאחרונה – מגדירה את הצורה שבה תיעשה האנימציה. בדוגמא שלעיל – linear משמעותו שהאנימציה תקרה בצורה אחידה מהרגע הראשון ועד הרגע האחרון. ניתן לתת הגדרות שונות המהוות חלק מהפונקציה built-in בדפדפן, ולחלופין ניתן לבנות את הקצב בהתאמה אישית (בפרק מיוחד נדבר על זה בעז"ה).
נ.ב.
ניתן להגדיר לסלקטור אחד יותר מtransition אחד, באמצעות הפרדה בפסיק. לדוגמא:
#div{
transition: color .4s, background .3s;
}ועוד נ.ב.
כמו שניתן לראות בדוגמא האחרונה, שתי הפרמטרים הראשונים של הפונקציה transition הנם חובה, ואילו שתי הפרמטרים האחרונים אפציונליים בלבד.
ונ.ב. אחרון…
במידה ורוצים שכל השינויים יקבלו הגדרת זמן אחת, ורק שינוי ספציפי אחד יקבל הגדרה אחרת נכתוב כך:
transition: all .5s, opacity .3s;כולם בדוגמא יקרו במשך חצי שניה, ורק אפקט השקיפות יקרה במשך 0.3 שניה.