אנימציות מעברי עמודים ב CSS
פוסט זה כולל טיפ קצר בנושא פיתוח Front End. אם אתם רוצים ללמוד יותר לעומק על פיתוח Front End מהבסיס ועד הנושאים המתקדמים תשמחו לשמוע שבניתי קורס וידאו מקיף בנושא זה הכולל מעל 50 שיעורי וידאו והמון תרגול מעשי.
למידע נוסף והצטרפות לקורס בקרו בדף קורס Front End באתר.
לאחרונה הוספתי קוד אנימציה לפרויקט שלא השתמש ב Frameworks כלשהן, והדבר נתן לי הזדמנות להזכר ולחפש דרכים קלות לשלב בין JavaScript לאנימציות CSS. תקציר החוויה ואתגר בהמשך הפוסט.
1. אנימציה לעמוד הבא
האנימציה הפעם היא מימוש של Page Slide למעבר לעמוד הבא. בזכות יחידות vw ו vh של CSS קל מאוד להגדיר מיכל שיכסה את כל העמוד וכך האלמנט עבור העמוד הנוכחי נמצא במיכל והאלמנט עבור העמוד הבא מתווסף מצד ימין.
בשביל להוסיף עמוד חדש תחילה מוסיפים div עבורו עם קלאס מתאים שגורם לו להופיע מצד ימין לעמוד הנוכחי, ואז מורידים את הקלאס. הבעיה שזה לא ממש עובד כפי שאפשר לראות בהמחשה הבאה:
מוזמנים לשחק עם הקוד ולראות אם אתם מוצאים את הבעיה ואיך מתקנים לפני שממשיכים לקרוא. קישור לקודפן:
http://codepen.io/ynonp/pen/VaVjzp
2. תיקון הקוד: הוספת Reflow
הסיבה לכשלון היא פשוטה: הדפדפן מסיר את הקלאס החדש מהר מדי ולכן לא מספיק לצייר את העמוד החדש מצד ימין. בפעם הראשונה שמציירים את העמוד הוא ללא הקלאס enter ולכן מופיע בדיוק באמצע על גבי העמוד הנוכחי.
התיקון פשוט אך עשוי להיראות מוזר במבט ראשון. הוסיפו לפונקציה showPage את השורה:
nextPage.offsetWidth = nextPage.offsetWidth;
מיד אחרי הקריאה ל appendChild. למרות שהשורה נראית חסרת ערך, שליפת ערכו הנוכחי של offsetWidth מכריחה את הדפדפן לצייר את הדף ולכן הציור הראשוני הוא עם הקלאס enter. הסרת הקלאס מביאה לתחילת האנימציה.
והאתגר? נסו להוסיף אנימציה הפוכה בלחיצה על כפתור Back בדפדפן. שימו לינק לקודפן שלכם בתגובות אם הצלחתם.