Animation for Angular *ngFor list

If you want to create an animation for the ngFor list, where one item fades out when it is removed, and the remaining items below it slide up slowly, you can do so.
here's the code of the animation:

export const fadeOutAndShrinkAnimation: AnimationTriggerMetadata = trigger(
  "fadeOutAndShrinkAnimation",
  [
    transition(":leave", [
      sequence([
        query(".css-class-of-ngfor-list", [
          style({ opacity: 1 }),
          animate("600ms ease-in", style({ opacity: 0 })),
        ]),
        query(".css-class-of-ngfor-list", [
          animate("800ms ease-in", style({ height: 0 })),
        ]),
      ]),
    ]),
  ]
);

Here's a breakdown of the code:

fadeOutAndShrinkAnimation is a constant that holds the animation trigger definition.

trigger("fadeOutAndShrinkAnimation", [...]) is used to define the trigger. The string "fadeOutAndShrinkAnimation" is the trigger's name.

transition(":leave", [...]) is defining a transition for the trigger. The :leave is a special state that is applied when an element is leaving the view (e.g., being removed).

Inside the transition, there is a sequence of animation steps defined using sequence([...]).

query(".call-notification-item", [...]) is used to target elements with the class "call-notification-item" within the component. The query function is typically used to define animations for elements matching a particular selector.

Inside the first query, there is an animation sequence that includes:

style({ opacity: 1 }): This sets the initial opacity of the selected elements to 1.
animate("500ms ease-in", style({ opacity: 0 })): This animates the opacity of the selected elements to 0 over 500 milliseconds with an "ease-in" timing function.
In the second query, there is another animation sequence that includes:

animate("600ms ease-in", style({ height: 0 })): This animates the height of the selected elements to 0 over 600 milliseconds with an "ease-in" timing function.