ההבדל בין ממשק שמרגיש זול לזה שמרגיש נחשב הוא בדרך כלל חמישית שנייה. כפתור שמצמיד לצבע הריחוף שלו ברגע שהמצביע שלך נוגע בו נקרא כפתאומי; אותו כפתור שמקל על הצבע הזה במשך מאתיים אלפיות השנייה נקרא כמוסתיים. ההקלה הזו היא מעבר CSS, ולמשהו כל כך קטן זה מדהים באיזו תדירות ראיתי את זה נעשה לא בסדר, לשים את מצב הריחוף במקום את מצב הבסיס, מכוון על ידי ניסוי וטעייה על פני תריסר רעננים, או מיושם על מאפיין שאינו יכול להנפיש כלל.
מעבר הוא הדפדפן' דרך הנפשת השינוי בין שני ערכים של מאפיין לאורך זמן, במקום לעבור באופן מיידי. זהו סוס העבודה מאחורי אפקטי ריחוף, מצבי מיקוד, הרחבת פאנלים ומחלקות מוחלפות, וזה כמעט תמיד החלק הראשון של תנועה שמישהו מוסיף לפרויקט. אבל הקיצור דוחס ארבעה ערכים לקו אחד בסדר קבוע, פונקציית התזמון היא החלק שקובע איך התנועה מרגישה, ויש צוק ידוע שאנשים נופלים ממנו כשהם מנסים לדעוך משהו display: none. בניית המעבר שבו אתה יכול לראות אותו משחק שומרת את כל זה.
ה מחולל מעבר CSS מאפשר לך לבחור מאפיין, להגדיר את משך הזמן וההשהיה באלפיות שניות, ולבחור פונקציית תזמון ממילות המפתח של CSS וקבוצה של עקומות מעוקבות-בזייר שנאספו. אתה יכול לערום מספר מעברים לקיצור אחד, וכפתור טריגר מפעיל את התנועה באלמנט תצוגה מקדימה חיה כך שתרגיש את ההקלה לפני שאתה מתחייב אליה. ההצהרה המדויקת יושבת בתיבה מוכנה להעתקה למטה.
TL;DR: מעבר CSS מחייה את השינוי בין שני ערכים של מאפיין לאורך משך מוגדר הוא שייך למצב הבסיס, לא למצב הריחוף, כך שהאלמנט מקל בשני הכיוונים סדר הקיצור הוא מאפיין, משך, תזמון-פונקציה, עיכוב אתה לא יכול לעבור
display, כי אין לו ערכי ביניים, ואתה צריך להעדיף אנימציהtransformוopacityלביצועים חלקים. גנרטור זה חושף כל חלק עם תצוגה מקדימה של ריחוף חי, תומך במספר שכבות ופולט CSS נקי. הוא פועל כולו בדפדפן שלך ללא הרשמה.
איזו בעיה פותר מחולל מעבר CSS?
החלק הקשה של מעבר אינו התחביר; זה שאתה לא יכול לשפוט תנועה על ידי קריאתו. transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) מתאר קלות הקפצה ספציפית, אבל הדרך היחידה לדעת אם ההקפצה הזו מרגישה מתאימה לכפתור שלך היא לראות את זה קורה. ולראות את זה קורה בפרויקט שלך פירושו לכתוב את הכלל, להגדיר את מצב הריחוף, לשמור ולהזיז את העכבר מעל האלמנט, ואז להתאים מספר אחד ולעשות הכל שוב. הלולאה הזו איטית מספיק כדי שרוב האנשים מסתפקים בדבר הראשון שעובד ולא בדבר שמרגיש הכי טוב.
גנרטור הופך את הלולאה הזו ללחיצה אחת אתה מגדיר משך ולוחץ על ההדק, ואלמנט התצוגה המקדימה משחק את המעבר לפניך שנה את פונקציית התזמון ולחץ עליה שוב, ואתה מרגיש את ההבדל בין שקופית ליניארית לבין יישוב קל-אאוט מיד לאחר כמה סיבובים אתה מפתח תחושה של איך מאתיים אלפיות שניות מרגישות לעומת חמש מאות, שזו האינטואיציה שמפרידה בין תנועה שעוזרת לתנועה שמפריעה בדרך כשאתה מרוצה, ה-CSS הפועל כבר כתוב, אז אין מה לתמלל.
אותו ארגומנט מהימנות חל כאן כמו בכל בונה CSS חזותי: אינך יכול לייצר פגום transition ערך על ידי גרירת סליידרים ובחירה מתוך תפריטים, כך שהפלט תמיד בטוח להדבקה. זו הסיבה שאני שומר על סוג זה של כלי קרוב, אותו אינסטינקט מאחורי הגעה אל מחולל טרנספורמציה CSS כשאני צריך טרנספורמציה במקום לספור מעלות בראש.
לאן המעבר הולך, על מצב הבסיס או מצב הריחוף?
זו הטעות שאני רואה הכי הרבה, וכדאי לציין בבירור כי התיקון כל כך פשוט. המעבר שייך לאלמנט's מצב הבסיס, לא על שלו :hover כלל. כאשר המעבר מוכרז על מצב הבסיס, הדפדפן מחייה את המאפיין בשני הכיוונים: הוא מקל על שינוי הריחוף כאשר המצביע מגיע, והוא מקל בחזרה כאשר המצביע עוזב. הסימטריה הזו היא שגורמת לאינטראקציה להרגיש שלמה.
שים את המעבר רק על :hover ואתה מקבל אפקט הפוך המאפיין חי בצורה חלקה בדרך פנימה, כי המעבר קיים בזמן שהאלמנט מרחף, אבל ברגע שהמצביע עוזב, ה :hover הכלל כבר לא חל, המעבר הולך איתו, והמאפיין נצמד לאחור באופן מיידי התוצאה היא כפתור שנרגע בחן ואז נדחק בחזרה למטה, מה שנראה גרוע יותר מאשר ללא אנימציה כלל. הפלט של generator' נכתב כך שייכנס למצב הבסיס, וההנחיה נאפית בכלי בדיוק מהסיבה הזו. הכריז על זה פעם אחת, על האלמנט עצמו, ותן לשינויי המצב להפעיל אותו.
מהו הסדר הנכון של קיצור המעבר?
ה transition קיצור אורז עד ארבעה ערכים לשורה אחת, והסדר קבוע לפי המפרט: מאפיין, משך, תזמון-פונקציה, עיכוב. כך transition: opacity 300ms ease-in-out 100ms פירושו תכונת האטימות, מונפשת מעל שלוש מאות מילישניות, באמצעות עקומת קלות-יציאה, לאחר עיכוב של מאה מילישניות. טעה בהזמנה והדפדפן מתעלם מההצהרה או קורא אותה כמשהו שלא התכוונת.
הכלל האחד שתופס אנשים הוא שני ערכי הזמן גם משך הזמן וגם ההשהיה הם זמנים, ו-CSS מבדיל אותם אך ורק לפי מיקום: ערך הזמן הראשון הוא תמיד משך הזמן, והשני הוא תמיד ההשהיה אם אתה כותב רק ערך זמן אחד, הוא נקרא כמשך הזמן, וההשהיה נשארת בברירת המחדל של אפס זו הסיבה שמעבר שנראה שמתחיל מוקדם מדי הוא לעתים קרובות מקרה של עיכוב שנכתב בטעות ראשון המחולל עוקף את כל הבעיה על ידי בניית הקיצור עבורך בסדר הנכון, והוא משמיט את ההשהיה לחלוטין כאשר הוא אפס, כך שלעולם לא שולחים נגרר 0ms זה לא עושה כלום הנה האנטומיה בטבלה.
| חלק | דוגמה | מה זה שולט |
|---|---|---|
| רכוש | opacity |
איזה נכס מחייה, או all לכל אחד שניתן להנפשה |
| משך | 300ms |
כמה זמן לוקח האנימציה; ערך הפעם הראשונה |
| תזמון-פונקציה | ease-in-out |
עקומת התאוצה של התנועה |
| עיכוב | 100ms |
כמה זמן לחכות לפני שמתחילים; ערך הפעם השנייה |
למה התצוגה שלי: אין מעבר לא להנפיש?
זה הצוק, וכמעט כולם יורדים ממנו לפחות פעם אחת אתה רוצה אלמנט לדעוך פנימה, אז אתה עובר display מ none ל block ולהגדיר opacity, והאלמנט פשוט מופיע ללא דהייה. הסיבה היא בסיסית: display אינו נכס הניתן להנפשה אין חצי נקודה בין none ו block, אין ערך שהדפדפן יכול לבצע אינטרפולציה אליו בסימן חמישים אחוז, אז אין מה לעשות. השינוי מתרחש באופן מיידי, וכל אנימציית אטימות ששכבתם למעלה מנותקת כי האלמנט לא הוצג מלכתחילה.
התיקון הקלאסי הוא להנפיש opacity ו visibility יחד ולעזוב display מתוך זה. visibility יכול לעבור מכיוון שלמרות שהוא גם מאפיין בדיד, התאמה שלו עם משך מאפשרת לדפדפן להחזיק את האלמנט גלוי עד שהדהייה של האטימות מסתיימת ביציאה התיקון המודרני הוא transition-behavior: allow-discrete, יכולת חדשה יותר המאפשרת לך להנפיש מאפיינים בדידים כמו display בנקודות הקצה של מעבר, כך שאתה באמת יכול לדעוך פנימה display: none בדפדפנים שתומכים בזה כך או כך, השיעור זהה: בדוק שלמאפיין שאתה מעביר יש ערכי ביניים לפני שאתה מבלה שעה בתהייה למה שום דבר לא זז זה סוג הגוצ'ה שצצה תצוגה מקדימה חיה תוך שניות, וזה חלק גדול מהטיעון לבניית תנועה שבה אתה יכול לצפות בו.
מהי פונקציית תזמון, ולמה זה כל כך משנה?
פונקציית התזמון היא החלק במעבר שמחליט איך התנועה מרגישה, והיא עושה הרבה יותר עבודה מאשר משך הזמן שני מעברים באותו אורך יכולים להרגיש שונים לחלוטין בהתאם לעקומה שלהם.A linear מעבר נע במהירות קבועה ומרגיש מכני, כמו חלק מכונה. An ease-out המעבר מתחיל מהר ומאט ככל שהוא מגיע, מה שמרגיש טבעי מכיוון שהוא מחקה כיצד עצמים פיזיים מאטים, וזו ברירת המחדל הנכונה עבור רוב תנועת הממשק. ease-in עושה את ההיפך והכי טוב לדברים שיוצאים מהמסך.
מתחת, כל אלה עקומות מעוקבות-בזייר מילות המפתח ease, ease-in, ease-out ו ease-in-out הם רק שמות ידידותיים עבור ספציפיים cubic-bezier(x1, y1, x2, y2) ערכים, כאשר שתי נקודות הבקרה מעצבות את התאוצה מה שהופך את המעוקב-בזייר לעוצמתי יותר הוא שנקודת בקרה עם a y ערך מעל אחד או מתחת לאפס דוחף את האנימציה מעבר לנקודת הקצה שלה ובחזרה, וכך אתה בונה חריגה או הקפצה. המחולל כולל עקומה סטנדרטית חומרית לתנועת ממשק נקייה ועקומה אחורית החורגת לתחושה קפיצית ושובבה, בתוספת א steps() פונקציה לתנועה שקופצת במסגרות בדידות ולא בגלישה, וכך אתה מחייה ספרייט או מונה מתקתק בחירת עקומה ולחיצה על ההדק היא הדרך המהירה ביותר לבנות תחושה למה שכל אחד עושה.
מתי עלי להשתמש במספר שכבות מעבר?
מעבר בודד מחייה תכונה אחת, אך אינטראקציות אמיתיות משתנות לעתים קרובות כמה בבת אחת. כפתור שמתרומם על ריחוף עשוי לשנות את צבע הרקע שלו, לדחוף את הטרנספורמציה שלו ולהעמיק את הצל שלו, וכל אחד מאלה עשוי לרצות תזמון משלו transition מאפיין מטפל בכך באמצעות רשימה מופרדת בפסיקים, כאשר כל ערך הוא מעבר מלא עם מאפיין משלו, משך, פונקציית תזמון והשהייה משלו.
המחולל תומך בכך ישירות: הוסף שכבה לכל מאפיין, כוונן כל אחד באופן עצמאי, והכלי מחבר אותם לקיצור אחד כמו transition: background-color 200ms ease, transform 200ms ease-out. הסיבה לתת למאפיינים מעברים נפרדים במקום להשתמש all הוא שליטה וביצועים. transition: all נוח, אבל זה מחייה כל מאפיין שמשתנה, כולל כאלה שלא התכוונת, וזה מאלץ את הדפדפן לצפות בהכל לשינויים מתן שמות למאפיינים הספציפיים הוא גם צפוי יותר וגם זול יותר החשיפה האיטית שנקבעה מראש בכלי מציגה מעבר דו-שכבתי, אטימות דהייה והזזת טרנספורמציה יחד עם השהייה משותפת, שהיא המתכון הסטנדרטי לאלמנט שמקל על הראייה אם צד הטרנספורמציה של הזיווג הזה הוא מה שאתה מכוון, ה מחולל טרנספורמציה CSS הוא הכלי הנלווה, והשניים משמשים כמעט תמיד יחד.
אילו מאפיינים עלי להנפיש לביצועים חלקים?
לא כל הנכסים זולים באותה מידה להנפשה, ולבחירה יש השפעה ישירה אם המעבר שלך פועל בשישים פריימים חלקים בשנייה או מגמגם. שני המאפיינים שיש להעדיף הם transform ו opacity. ניתן למסור את שניהם ל-GPU ולהרכיב אותם מבלי לחשב מחדש את פריסת העמוד, כך שהנפשת אותם נשארת חלקה גם בחומרה צנועה. זו הסיבה שכרטיס שמחליק איתו transform: translateX מרגיש חמאתי בזמן שאותו כרטיס מונפש עם left מרגיש מחוספס.
המאפיינים שיש להימנע מהנפשה הם אלה שמפעילים פריסה: width, height, top, left, margin ו padding. שינוי כל אחד מאלה מאלץ את הדפדפן לחשב מחדש את המיקום והגודל של האלמנט וכל מה שמושפע ממנו, בכל פריים בודד של האנימציה, שהוא יקר והוא הגורם השכיח ביותר לתנועה מטורפת. אם אתה מוצא את עצמך רוצה להנפיש רוחב, בדרך כלל כדאי לשאול האם א transform: scaleX היה מייצר אפקט דומה בזול יותר הגנרטור מאפשר לך לבחור כל נכס כך שלעולם לא נחסם, אבל המאפיינים שהוא מפרט לשים transform ו opacity ליד החלק העליון כי אלה הם אלה שאתה צריך להגיע אליהם קודם. המקרה הרחב יותר לבניית סט כלים נחשב כמו זה נמצא ב- ערכת כלים למפתחי אינטרנט חתיכה, והרגלי זרימת העבודה מאחוריה נמצאים ב כלי פרודוקטיביות למפתחים מדריך.
איך הגנרטור שומר על התצוגה המקדימה כנה?
כל בונה חזותי עומד בפני אותו סיכון: התצוגה המקדימה והקוד המיוצא מתרחקים זה מזה עד שהכלי מלמד אותך ערך שלא ישחזר. מחולל זה מיישם את המדויק transition הערך שהוא מוציא לאלמנט התצוגה המקדימה ומפעיל אותו עם שינוי מצב אמיתי, כך שהתנועה שאתה רואה היא התנועה שה-CSS המועתק יפיק. אין נתיב אנימציה נפרד שיכול לא להסכים.
מכיוון שמעבר פועל רק כאשר מאפיין משתנה, התצוגה המקדימה זקוקה למצב לעבור ביניהם, וזה מה שכפתור ההדק עושה: הוא הופך את האלמנט בין שתי קבוצות של ערכים כך שהמעבר יורה ותוכל לצפות בו. זה משקף את אופן הפעולה של המעבר בטבע, שבו ריחוף, פוקוס או מחלקה מוחלפת הם מה שמניע אותו. גם הפלט נשאר מינימלי, מוריד את ההשהיה כשהוא אפס ומפרט רק את השכבות שהוספת, אותה דיסציפלינה של פליטת הצהרות משמעותיות בלבד שעוברות דרך מחולל גרדיאנט וה מחולל box-shadow.
אילו דפדפנים תומכים במעברי CSS?
מעברי CSS נתמכים בכל דפדפן נוכחי והם כבר הרבה יותר מעשור. ה transition הנכס וכל הידיים הארוכות שלו הם אוניברסליים ולא מקובעים מראש, כך שהפלט של מחולל זה עובד ב-Chrome, Firefox, Safari ו-Edge ללא קידומות או נפילות של ספקים. החדש יותר transition-behavior: allow-discrete יכולת הנפשת מאפיינים בדידים כמו display הוא עדכני יותר ויש לו תמיכה צרה יותר, אז התייחסו לטכניקה הספציפית הזו כאל שיפור מתקדם ושמרו על זיווג האטימות והנראות כ-fallback שלכם. עבור הכללים הסמכותיים, מפרט CSS Transitions Module Level 1 מה-W3C הוא המקור העיקרי, וכדאי לקרוא אותו ברגע שהמחולל נתן לכם תחושה כיצד החלקים מתאימים.
אם אתה מרכיב קבוצה רחבה יותר של כלי CSS חזותיים, מחולל הטרנספורמציה וה- מחולל מסנן CSS חבר באופן טבעי עם זה, מכיוון שמעבר הוא מה שמחליק את הטרנספורמציות והמסננים שאתה בונה איתם. הכל כאן פועל בצד הלקוח, וה-CSS שאתה מעתיק הוא שלך לשימוש ללא זמן ריצה, ללא שלב בנייה וללא תלות.
שאלות נפוצות
מהו מחולל מעבר CSS?
מחולל מעבר CSS הוא כלי ויזואלי שבונה מעבר CSS מהגדרות שתבחר אתה בוחר מאפיין, משך, פונקציית תזמון והשהייה, והוא מוציא את קיצור המעבר עם תצוגה מקדימה חיה שתוכל להפעיל כדי לצפות בהקלה.
איפה אני שם את המעבר, על מצב הבסיס או מצב הריחוף?
שים את זה על מצב הבסיס מעבר שהוכרז על כלל הבסיס מחייה את המאפיין בשני הכיוונים, לתוך שינוי הריחוף ובחזרה ממנו. הכרזה עליו רק על ריחוף מחייה את השינוי פנימה אבל נותנת לו להיצמד לאחור באופן מיידי כשהמצביע עוזב.
מה סדר קיצור המעבר?
הסדר הוא תכונה, משך, תזמון-פונקציה, השהיה, למשל מעבר: אטימות 300ms easy-in-out 100ms ערך הפעם הראשונה הוא תמיד משך הזמן והשני הוא תמיד ההשהיה, כך ערך זמן בודד נקרא כמשך הזמן.
למה התצוגה שלי: אין להציג: בלוק מעבר לא להנפיש?
כי תצוגה אינה מאפיין animatable אין ערך ביניים בין none לבין בלוק, אז הדפדפן אין שום דבר כדי tween.Transition אטימות ונראות יחד במקום, או להשתמש מעבר-התנהגות: לאפשר-בדיד בדפדפנים חדשים יותר לדעוך פנימה מהתצוגה: none.
האם אוכל להעביר יותר מנכס אחד בבת אחת?
כן. להפריד כל מעבר עם פסיק, למשל מעבר: אטימות 300ms קלות, להפוך 200ms קלות-אאוט מחולל זה בונה רשימה זו בשבילך כמו שאתה מוסיף שכבות, נותן כל מאפיין משך משלה, תזמון פונקציה והשהייה.
מהי פונקציית תזמון מעוקב-בזייר?
פונקציית תזמון מעוקב-בזייר מגדירה עקומת תאוצה מותאמת אישית משתי נקודות בקרה, כתובה מעוקב-בזייר (x1, y1, x2, y2) מילות המפתח קלות, קלות-אין, קלות-אאוט וקלות-אין-אאוט הן קיצורי דרך לעיקולים ספציפיים, ונקודות בקרה מעל 1 או מתחת ל-0 יוצרות חריגה, וכך נבנית הקפצה.
אילו מאפיינים עלי להנפיש לביצועים חלקים?
מעדיף טרנספורמציה ואטימות הם מורכבים על GPU ולא להפעיל פריסה, אז הם הנפשה ב 60fps. הנפשת רוחב, גובה, עליון, שמאל או שוליים מאלץ את הדפדפן לחשב מחדש פריסה על כל מסגרת, אשר הוא הגורם השכיח ביותר של גמגום מעברים.
האם המעבר שנוצר CSS חופשי ובטוח לשימוש?
כן הכלי חינמי לחלוטין ללא מגבלות הרשמה או שימוש, והוא פולט CSS סטנדרטי ללא קידומת הנתמך בכל דפדפן מודרני כל העיבוד מתרחש בדפדפן שלך, כך ששום דבר לא מועלה והכלי עובד במצב לא מקוון לאחר הטעינה.
