Angular 4 - Animations
BrowserAnimationsModule לאפליקציה, ואת הפונקציות trigger, state, style, transition ו-animate מתוך @angular/animations.[@myCartAnimation], כשהשם הוא שם הטריגר. הטריגר עצמו מוגדר בקוד הקומפוננטה, בתוך המערך animations.:enter מתחיל עם translateX(100%) ושקיפות 0, ובאנימציה של 500 מילישניות מגיע ל-translateX(0) ושקיפות 1. כשהאנימציה מסתיימת, העיצוב של הסוף הופך למצב הרגיל של הרכיב.:leave (* => void) הופך את הכיוון, והרכיב נעלם בהדרגה. אפשר גם להוסיף scale: מוצר מופיע מגודל 1.5 ומתכווץ לגודל 1, או נעלם מגודל 1 עד 0.state מגדיר עיצוב שמופעל כשתנאי מתקיים. במדריך נבדק אם מחיר המוצר גדול מ-20 דולר, ואם כן הפונט מקבל fontWeight: 'bold' והרקע נעשה שחור. מי שכותב מקף ב-CSS, כמו font-weight, צריך לכתוב אותו כ-camelCase בטייפסקריפט.animate הוא נקודת ההתחלה של העיצוב, ומה שכתוב בתוכו הוא הסוף שאליו האנימציה מגיעה.פרקי ההרצאה: Angular 4 - Animations
תמלול ההרצאה: Angular 4 - Animations
הטקסט המלא של הדקות הראשונות בהרצאה «Angular 4 - Animations» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
טוב חברים הגענו לפרק מעניין של אנימציות איך עושים אנימציות שחלק מהחנות יופיע באופן דינמי לדוגמה עכשיו אם אני מוסיף מוצר הוא מופיע לי פה כבום אחד גדול ואני רוצה שייכנס לי בעדינות מהצד כל מיני אנימציות קטנות ומאוד חמודות וחבר'ה של אנגולר עשו על זה ממש מודול שלם של אנימציות שאנחנו צריכים לייבא אותו
אלינו ולהשתמש בו ובואו נעשה את זה נעשה קופי ונעשה אצלנו אנימציות אתם תראו שזה ממש ייראה הרבה יותר יפה והרבה יותר נחמד.
האמת שאת המודולים של האנגולר אני שם למעלה ואת שלי אני שם למטה. דבר שני, אני רוצה להביא אותו באימפורטס של המודולים המוכנים.
הנה כאן, פה זה כל הרכיבים שבניתי ופה זה מודולים מוכנים שאני מייבא. הנה זה זה.
בראוז מודול שהוא גם צריך אותו, לפי דעתי הוא כבר נמצא אצלי. כן, הוא כבר נמצא אצלי. בכל מקרה, אז לא צריך לדאוג לזה. יפה מאוד אז הבאנו אותו ועכשיו אנחנו הולכים להשתמש בו ויש פה כל מיני אנימציות שאפשר לעשות אנחנו גם נעבור על האתר שלהם כי הוא קצת יותר מורכב אבל בואו נתחיל לבד אנחנו רוצים להצמיד אנימציה לפרודקט ליסט בקומפוננטה
של פרודקט ליסט הנה הבלוק שלנו של סל הקניות שזה הבלוק שמופיע כשיש לפחות קנייה אחת והבלוק הזה נכנס בצורה ככה פתאום בום מופיע לא בצורה עדינה לא בצורה יפה אנחנו רוצים שהוא ייראה בצורה נחמדה ויפה אז אנחנו צריכים להכריז עליו כאן להצמיד לו אנימציה. איך מצמידים אנימציה?
עושים סוגריים מרובעים שטרודל והשם של האנימציה נניח מיי קארט אנימיישן וזה השם של האנימציה שלי יופי עכשיו רק נשאר ללכת לקוד של טייפ סקריפט ולעשות פה אנימציה חדשה איך אנחנו עושים את זה אנחנו פה למעלה בקומפוננטה עושים פסיק ויש פה אנימשנס שזה בדיוק עושה לי את אז איך כותבים את הדבר הזה?
אז אנחנו פותחים בעצם מערך של אנימציות, ובתוך המערך יש לנו כל מיני דברים שאנחנו יכולים לכתוב. בואו נתחיל בטריגר, ומה הטריגר שלנו? טריגר שלנו זה בדיוק השם של האנימציה, זה מה שמפעיל אותה. זה הטריגר שלה, רק אני רוצה את המילה טריגר שיופיע בשורה נפרדת ככה.
ובתוך הטריגר, מה קורה? הוא אומר לי שהוא לא יכול למצוא את הטריגר. למה הוא לא יכול למצוא את הטריגר? כי צריך לעשות לו אימפורט מתוך אנגולר קור. הנה הוא הוסיף לי פה את הטריגר, יפה מאוד.
אז יש לנו את השם של האנימציה, זה השם ששמנו שמה, ומה קורה. עכשיו, בתוך האנימציה אני יכול להגדיר state ומצבים, על זה נדבר בהמשך, אני עכשיו אגדיר ישר מעברים, Transition.
הנה, בואו נראה איך כותבים את זה פה באתר. אז הנה, Transition between two states. קודם כל הם עושים אימפורט לכל אלו מתוך Angular Animations, ואת זה לא עשינו איתכם, בואו נעתיק מהם.
הנה הם מייבאים את זה מאנגולר אנימשן ואנחנו הבאנו את זה מאנגולר קור אוקיי וכשאני רוצה את זה בשורה אחת יופי אז הבאנו את כל הקומפוננטות עכשיו יש לנו פה טריגר השם שלו אחרי זה סטייט זה מצבים שונים שאנחנו יכולים להגיד לו במצב שהרכיב הוא לא אקטיבי במצב שהוא כן אקטיבי אנחנו נדבר על זה בהמשך שלמעשה אני יכול לקבוע
לו באיזה מצב יהיה הרכיב וכשהוא במצב מסוים איזה סטייל של css להוסיף לו באופן כללי כל האנימציות זה חלק מתוך css3 ויש לנו פה transition ממצב למצב תוך כמה זמן וזה בדיוק מה שאני רוצה לעשות ואנחנו נעשה פה אבל לא ממצב inactive ו-active שזה inactive ו-active ממצב למצב איך עוברים ואת המצב הזה דרך אגב איך אתם מגדירים זוכרים שעשינו שטרודל טריגר אתם יכולים להגיד לו גם שווה לאיזה מצב אז
אני יכול להגיד לו כשהרכיב הזה הוא במצב כזה או כשהוא במצב כזה אני מגדיר לו מצבים לרכיב ולפי המצב שאני מגדיר לו מופעל עליו סטייל העיצוב ויש תהליך מעבר ממצב אחד לאחר, אוקיי?
אז כאן אני קובע לו איזה מצב אני רוצה שיהיה, לדוגמה inactive או active, ואת המצב הזה יש ביניהם מעבר ויש תנאים למצב, לסטייט הזה. אם תסתכלו, הסטייט הזה פה מתחלף, הפונקציה toggleState מחליפה את המצבים, this.state ו-this.state זה בדיוק קובע לי את המשתנה הזה.
אני עכשיו לא רוצה להצמיד לו מצבים ידנית, אני רוצה להשתמש במצבים שהם באים כחלק ממערכת שנקראים ווייד. ווייד זה אומר שהוא לא קיים או שהוא כן קיים.
אז אני יכול לעשות מצב שהוא קיים או לא קיים, מווייד לכוכבית או מכוכבית לווייד, בסגנון כזה ווייד כוכבית וכוכבית לווייד. עכשיו במקום לרשום את זה ככה, שזה גם אפשרי, אני ארד למטה, אני אראה לכם שאותו דבר אפשר לכתוב יותר ברור כמו שכותבים ב-CSS, כזה פסבדו סלקטור.
זה נקרא Enter, שזה כמו לעשות מווייד לכוכבית. ווייד זה ריק, כוכבית זה לכל מצב. וליב זה הפוך, מכל מצב לעבור לריק. אז אני יכול לבחור או צורה כזאת כתיבה או צורת כתיבה כזאת.
אני מעדיף לכתוב ככה, וזה למעשה מה שאני הולך לכתוב. אז אני כותב כאן שהמעבר שלי יהיה במצב של כניסה, ואני במצב של כניסה, שזה זה, מווייד לכוכבית, יש לי איזשהו מערך של סטייל שאני עושה. בואו ניקח את הדוגמה הזאת ונתאים אותה אלינו.
יש לי פה מערך שאני מפעיל אותו אז מה שקורה זה דבר כזה עוד פעם יש לנו טריגר בתוך הטריגר יש מצבים אני עובר למצב כניסה בואו נעשה ישר גם מצב של יציאה שהוא יוצא החוצה אנחנו יכולים לעשות פה פסיק ומצב שהוא יוצא החוצה אז יש לי פה בעצם שני מצבים מצב כניסה מצב יציאה אני משתמש בזה כי זה יותר ברור לי הלאה כשאני בא להיכנס לפני שמתחיל האנימציה על
הרכיב הזה שמופעלת עליו האנימציה אני אומר לו, תוסיף ל-X שלו 100%. Translate X הזה זה בכלל חלק מ-CSS 3. ואני רוצה להראות לכם, אם אנחנו נלך ל-W3SchoolCSS3 ונרשום Translate X, אתם תראו שיש פה ממש דוגמאות איך זה עובד.
הנה פונקציית Translate והיא יודעת להזיז רכיב, בואו אני אראה לכם. אם אני מוחק את כל העיצוב הזה, הרכיב, שזה דיו רגיל, עומד במקום הזה.
אם אני מפעיל על הדיו הזה חוק שאומר translate לדוגמה 100 100 הוא יזיז אותו 100 פיקסלים ימינה ולמטה ואני יכול להגיד לו רק translate x ואז הוא יזיז רק בx אז ה-transform.2 translate x זה חלק מ-css3 שלא קשור לאנגולר ואני לוקח את הפקודה הזאת בשפת css3 ומפעיל אותה אליי אתם רואים transform 100% לדוגמה זה אומר שזה אורך 100% ואת זה אני לוקח מ-css3
ומכניס את זה בסטייל זאת אומרת שאני אומר לו תתחיל ממצב שהוא ב-100% ימין היותר ותעשה לי אנימציה במשך 500 מילי שניות אנימאט 500 מילי סקנדס גם האנימאט הזה זה חלק מהCSS 3 בוא נמצא פה אנימאט הנה אנימאשן אתם רואים אנימאשן פה זה חלק מCSS 3 וגם פה אתם כותבים לו אנימאט ותוך כמה זמן לעשות אנימציה אז גם אנימאשנים זה חלק מCSS 3 אז אנחנו אומרים לו תוך כמה זמן לעשות את האנימציה ואומרים לו לאן אנחנו רוצים שהוא
יגיע. זאת אומרת, מה הסטייל האחרון שאנחנו רוצים שיופעל עליו? אז אני אומר לו שהסטייל האחרון שאני רוצה שיופעל עליו זה יהיה Translate X ב-0. למעשה תגיע ל-0 וגם אני רוצה להוסיף לו שקיפות שיהיה לי מעניין, Opacity שזה שקיפות.
אני שם לו 0 בהתחלה וכשהוא יגיע חזרה שיגיע עם שקיפות אחת. אז אני אומר לו תקשיב לפני שהחלק הזה מתחיל אתה מיישם עליו את העיצוב הזה אחרי זה אתה עושה לו אנימציה ומגיע לנקודה הזאת ברגע שהגעת לנקודה הזאת העיצוב הזה נעלם והוא נהיה חלק רגיל אוקיי אז העיצוב הזה ייעלם ממנו כשהוא יהיה רגיל אבל למעשה זה המצב הרגיל שלו נקודת
0 ו-1 אז אני אומר לו פשוט להגיע למצב הרגיל שלו פס איתי 1 ועיצוב 0 אבל אני עושה את זה בצורה מפורשת יפה מאוד אז העיצוב הזה זה בהתחלה והעיצוב הזה בסוף כשהוא עוזב אני עושה לו הפוך תתחיל לעזוב מנקודה הזאת ותעזוב תוך 500 אלפיות השנייה ותעזוב לנקודה הזאת מה זה הנקודה הזאת שאתה לא נראה והx שלך ב-100% ימינה יותר בואו נראה
איך זה נראה כבר אין לנו שגיאות אפילו תראו אני קונה מוצר הופה אתם רואים איזה יופי זה זז ואין לי שגיאות אז עוד פעם אני מוריד מוצר אתם רואים איך זה נעלם איך זה מופיע שמתם לב לשקיפות עכשיו אני רוצה להראות לכם כמה דברים אם הייתי עושה שקיפות סופית נניח 0.5 אז תראו זה מגיע חצי שקוף ואז קופץ אולי לא שמתם לב לזה בואו נעשה לזה גם סקייל סקייל זה גודל לשנות לו גודל נעשה לו סקייל
שאנחנו רוצים אותו פי אחד וחצי אז תראו עכשיו הוא מגיע נהיה גדול וקופץ לי זה לא נראה יפה נוריד את הרעיון של הסקייל אני מאוד אוהב את מה שיצא לנו יצא לנו כזה פייד אין כניסה עדינה יופי בואו נראה עוד כמה דוגמאות מה עוד יכולנו לעשות שזה חשוב שתדעו יכולנו לעשות במקום כניסה ווייד כוכבית זה אומר מי
כלום נכנס פנימה מווייד כוכבית ויוצא החוצה גם כן מכל מצב לווייד ווייד זה ריק זה כאילו חלק לא קיים אם אנחנו כותבים ככה זה עובד אותו דבר בואו נראה אתם רואים זה אותו דבר יפה מאוד אני אישית מעדיף להשאיר את זה ככה ועכשיו נוסיף עוד אנימציה להוספת מוצר בודד שיהיה לנו
מעניין נלך לקארט ל html וב-ng4 איפה שאנחנו אנחנו מוסיפים פה מוצרים, מוסיפים עוד שורה ועוד שורה ועוד שורה, נגיד לו גם כאן שאנחנו רוצים להוסיף לו אנימציה שנקראת My New Product Animation, אני יודע מה, תמציאו לו שם, My New Product Animation Trigger,