אנימציות באנגולר מבוססות על היכולות של אנימציות CSS , לכן כל מי שמכיר אנמציות של CSS יהיה לו ממש קל וברור, מי שלא מכיר, לא לדאוג… זה ממש לא קשה.
תחילה, נמשוך את האנמציות שלא אנגולר מהספריה המתאימה
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule ],
כך נעשה אפקט fade –
אני אראה איך לעשות את האנימצה בתוך הרכיב ואחרי זה איך להוציא אותה החוצה לשימוש כלל הפרויקט.
לרכיב שלנו קוראים class-comp.component.ts
<p @fade> class-comp works! </p>
import { animate, state, style, transition, trigger } from '@angular/animations'; @Component({ selector: '.app-class-comp', templateUrl: './class-comp.component.html', styleUrls: ['./class-comp.component.scss'], animations: [ trigger('fade', [ transition('void => *', [ style({ //משפיע מידית backgroundColor: 'red', opacity: 0 }), animate(2000, style({ // משפיע לאורך זמן ובמידה שרוצים לעדכן באופן ספציפי התנהגות backgroundColor: 'white', opacity: 1 })) // animate(2000) //במידה ורוצים מעבר מהמצב המידי שנקבע למצב ברירת מחדל שנקבע על ידי ה-CSS ]), transition('* => void', [ // כאשר הרכיב יוצא מה-DOM animate(2000, style({ opacity: 0 })) ]) ]) ] })
דבר ראשון אנחנו מיבאים את הפונקציות שאנחנו צריכים מהמקום המתאים angular/animations ולא מ-CORE.
דבר שני, מוסיפים את הערך של אנמציות לרכיב שלנו שמקבל מערך של אנימציות (כרגע נעשה רק אחת).
עכשיו נפרק את המבנה של האנימציה ונבין איך היא עובדת:
- trigger – דבר ראשון שהוא מקבל זה את שם האנימציה, במקרה שלנו – fade .
- transition – מקבל הגדרה של מצב אחד למצב שני, void = הרכיב לא נימצא בדף (DOM), * = מצב ברירת מחדל של הרכיב כשהוא נמצא בדף.
- style – מקבל הגדרות של CSS לשינויים שאנחנו רוצים לעשות.
- animate – מקבל תחילה את משך הפעולה שרוצים במילישניות ואחרי זה את העיצוב שרוצים שיעשה.
שימו לב להערות שכתובות בקוד!
ראינו איך לבנות אנימציה ואפשר לראות שיש קוד שחוזר על עצמו, עצלנים שכמונו לא אוהבים לחזור על אותם דברים בקוד ולכן נראה איך אפשר לשפר אותו.
הקוד למעלה נבנה ללא STATE, תפקידו להגדיר מצב מסויים ואיזה הגדרות עיצוב הוא יקבל
@Component({ selector: '.app-class-comp', templateUrl: './class-comp.component.html', styleUrls: ['./class-comp.component.scss'], animations: [ trigger('fade', [ state('void', style({ //מגדיר את העיצוב במצב מסויים וכך אין צורך באופן מפורש להגדירו מחדש opacity: 0 })), transition('void => *', [ animate(2000) //במידה ורוצים מעבר מהמצב המידי שנקבע למצב ברירת מחדל שנקבע על ידי ה-CSS ]), transition('* => void', [ // כאשר הרכיב יוצא מה-DOM animate(2000) ]) ]) ] })
הרבה יותר נעים לעין ויותר קל להבנה.
אבל יש לנו עדיין כפילות, גם את זה אפשר לצמצם 😉.
אם הגענו למצב בו רכיב שיוצא ורכיב שנכנס מקבלים אותם הגדרות אז אפשר לאחד אותם כך:
@Component({ selector: '.app-class-comp', templateUrl: './class-comp.component.html', styleUrls: ['./class-comp.component.scss'], animations: [ trigger('fade', [ state('void', style({ //מגדיר את העיצוב במצב מסויים וכך אין צורך באופן מפורש להגדירו מחדש opacity: 0 })), transition('void => * , * => void', [ animate(2000) //במצב הזה מוגדרים אותם הגדרות כאשר הרכיב נכנס או יוצא ]), ]) ] })
האם אנחנו יכולים לצמצם את זה עוד?…….? ברור שכן 😂.
כרגע אנחנו במצב שלכל חוקיות יש כיוון אחד, מלא קיים וכן קיים ולהפך בנפרד. אנחנו יכולים לעבור מחד-כיווני לדו-כיווני
@Component({ selector: '.app-class-comp', templateUrl: './class-comp.component.html', styleUrls: ['./class-comp.component.scss'], animations: [ trigger('fade', [ state('void', style({ //מגדיר את העיצוב במצב מסויים וכך אין צורך באופן מפורש להגדירו מחדש opacity: 0 })), transition('void <=> *', [ animate(2000) //במצב הזה מוגדרים אותם הגדרות כאשר הרכיב נכנס או יוצא ]), ]) ] })
אם נעשה השוואה בין הקוד שהתחלנו איתו ולקוד כרגע זה פשוט נראה מצחיק.
לידע כללי, יש שמות נרדפים לחוקיות שהשתמשנו בה וניתן לכתוב את זה כך:
@Component({ selector: '.app-class-comp', templateUrl: './class-comp.component.html', styleUrls: ['./class-comp.component.scss'], animations: [ trigger('fade', [ state('void', style({ //מגדיר את העיצוב במצב מסויים וכך אין צורך באופן מפורש להגדירו מחדש opacity: 0 })), transition(':enter , :leave', [ // 'void => * , * => void' animate(2000) //במצב הזה מוגדרים אותם הגדרות כאשר הרכיב נכנס או יוצא ]), ]) ] })
עכשיו נעביר את האנימציה לקובץ חיצוני כדי שתהיה נגישה לכל הפרויקט
גלובלי –
אתם לא חייבים לעשות את זה כך, אבל אני ממליץ למקרה שהפרויקט יתרכב וכמות האנימציות תגדל.
נפתח סיפריה חדשה בשם animations וניצור בה קובץ חדש בשם : fade.animations.ts , נעביר את הקוד לשם ונחצין אותו החוצה כך:
import { animate, state, style, transition, trigger } from "@angular/animations"; export let fade = trigger('fade', [ state('void', style({ opacity: 0 })), transition(':enter , :leave', [ animate(2000) ]), ]);
והרכיב שלנו יראה כך:
import { Component, OnInit } from '@angular/core'; import { fade } from '../animations/fade.animations'; @Component({ selector: '.app-class-comp', templateUrl: './class-comp.component.html', styleUrls: ['./class-comp.component.scss'], animations: [ fade ] }) export class ClassCompComponent implements OnInit { constructor() { } ngOnInit() { } }
כל מה שכתבנו ברכיב שלנו בהתחלה הפך להיות מילה אחת 😁.
בפוסט הבא, אראה שימוש יותר מתקדם באנימציות.