Angular List Animation: Fade-In and Slide-Up

This challenge focuses on implementing dynamic list animations in Angular. You'll create a component that displays a list of items, and when items are added or removed, they should animate smoothly into and out of the view using fade-in and slide-up effects. This is a common requirement for enhancing user experience and providing visual feedback.

Problem Description

Your task is to build an Angular component that displays a list of items. When new items are added to the list, they should animate into view with a fade-in and slide-up effect. Conversely, when items are removed from the list, they should animate out with a fade-out and slide-down effect. You'll leverage Angular's animation capabilities to achieve this.

Key Requirements

Dynamic List: The component should manage a list of data (e.g., strings, objects) that can be dynamically added to and removed from.
Enter Animation: New items added to the list must animate in. The animation should consist of:
- Starting with opacity 0 and transitioning to opacity 1.
- Starting slightly below its final position and sliding up to its final position.
Leave Animation: Items removed from the list must animate out. The animation should consist of:
- Starting with opacity 1 and transitioning to opacity 0.
- Starting at its final position and sliding down to a position below its final location.
Reordering Animation: If the order of items in the list changes (e.g., due to sorting or other manipulations), the items should animate to their new positions.
Angular Animations: All animations must be implemented using Angular's built-in animation system (@angular/animations and BrowserAnimationsModule).

Expected Behavior

When an item is added to the list, it should appear smoothly. When an item is removed, it should disappear smoothly. If the list items are reordered, they should animate to their new positions without abrupt jumps.

Edge Cases to Consider

Rapid Additions/Removals: How does the animation behave if multiple items are added or removed very quickly?
Initial Load: Should the items animate in when the component first loads with an initial list? (For this challenge, assume initial items do not animate in upon component initialization).
Empty List: The component should handle scenarios where the list is initially empty or becomes empty.

Examples

Let's consider a list of simple string items.

Example 1: Adding an Item

Initial State:
```
['Apple', 'Banana']
```
User Action: Add 'Cherry' to the end of the list.

Intermediate State (Animation in progress):

['Apple', 'Banana', 'Cherry' (fading in and sliding up)]

Final State:
```
['Apple', 'Banana', 'Cherry']
```
The 'Cherry' item should smoothly fade in and slide up from its starting position.

Example 2: Removing an Item

Initial State:
```
['Apple', 'Banana', 'Cherry']
```
User Action: Remove 'Banana' from the list.
Intermediate State (Animation in progress):
```
['Apple', 'Banana' (fading out and sliding down), 'Cherry']
```
The 'Banana' item should smoothly fade out and slide down. 'Cherry' should also animate to its new position as if 'Banana' was no longer there.
Final State:
```
['Apple', 'Cherry']
```

Example 3: Reordering Items

Initial State:
```
['Apple', 'Banana', 'Cherry']
```
User Action: Move 'Cherry' to the beginning of the list.

Intermediate State (Animation in progress):

['Cherry' (animating to new position), 'Apple' (animating to new position), 'Banana' (animating to new position)]

Final State:
```
['Cherry', 'Apple', 'Banana']
```
All items should animate to their new positions smoothly.

Constraints

The Angular version used should be recent (e.g., v10 or later).
The animations should be performant enough to not cause noticeable lag, even with a moderately sized list (e.g., up to 50 items).
The solution should primarily use Angular's animations module. Avoid relying on external JavaScript animation libraries.
The component should be implemented using TypeScript.

Notes

You'll need to import BrowserAnimationsModule into your AppModule (or the relevant module).
Consider using trigger, state, style, animate, and transition from @angular/animations.
The query and stagger functions can be very useful for animating multiple items in a list.
For list item animations, you'll likely want to apply animations based on the * wildcard for elements entering, leaving, or moving within the list.
Think about how to define the starting and ending styles for your fade-in, slide-up, fade-out, and slide-down animations.
The challenge is to implement the core animation logic. You can create simple buttons or methods within your component to trigger the addition and removal of list items for testing purposes.

Angular List Animation: Fade-In and Slide-Up

Problem Description

Key Requirements

Dynamic List: The component should manage a list of data (e.g., strings, objects) that can be dynamically added to and removed from.
Enter Animation: New items added to the list must animate in. The animation should consist of:
- Starting with opacity 0 and transitioning to opacity 1.
- Starting slightly below its final position and sliding up to its final position.
Leave Animation: Items removed from the list must animate out. The animation should consist of:
- Starting with opacity 1 and transitioning to opacity 0.
- Starting at its final position and sliding down to a position below its final location.
Reordering Animation: If the order of items in the list changes (e.g., due to sorting or other manipulations), the items should animate to their new positions.
Angular Animations: All animations must be implemented using Angular's built-in animation system (@angular/animations and BrowserAnimationsModule).

Expected Behavior

Edge Cases to Consider

Rapid Additions/Removals: How does the animation behave if multiple items are added or removed very quickly?
Initial Load: Should the items animate in when the component first loads with an initial list? (For this challenge, assume initial items do not animate in upon component initialization).
Empty List: The component should handle scenarios where the list is initially empty or becomes empty.

Examples

Let's consider a list of simple string items.

Example 1: Adding an Item

Initial State:
```
['Apple', 'Banana']
```
User Action: Add 'Cherry' to the end of the list.

Intermediate State (Animation in progress):

['Apple', 'Banana', 'Cherry' (fading in and sliding up)]

Final State:
```
['Apple', 'Banana', 'Cherry']
```
The 'Cherry' item should smoothly fade in and slide up from its starting position.

Example 2: Removing an Item

Initial State:
```
['Apple', 'Banana', 'Cherry']
```
User Action: Remove 'Banana' from the list.
Intermediate State (Animation in progress):
```
['Apple', 'Banana' (fading out and sliding down), 'Cherry']
```
The 'Banana' item should smoothly fade out and slide down. 'Cherry' should also animate to its new position as if 'Banana' was no longer there.
Final State:
```
['Apple', 'Cherry']
```

Example 3: Reordering Items

Initial State:
```
['Apple', 'Banana', 'Cherry']
```
User Action: Move 'Cherry' to the beginning of the list.

Intermediate State (Animation in progress):

['Cherry' (animating to new position), 'Apple' (animating to new position), 'Banana' (animating to new position)]

Final State:
```
['Cherry', 'Apple', 'Banana']
```
All items should animate to their new positions smoothly.

Constraints

The Angular version used should be recent (e.g., v10 or later).
The animations should be performant enough to not cause noticeable lag, even with a moderately sized list (e.g., up to 50 items).
The solution should primarily use Angular's animations module. Avoid relying on external JavaScript animation libraries.
The component should be implemented using TypeScript.

Notes

You'll need to import BrowserAnimationsModule into your AppModule (or the relevant module).
Consider using trigger, state, style, animate, and transition from @angular/animations.
The query and stagger functions can be very useful for animating multiple items in a list.
For list item animations, you'll likely want to apply animations based on the * wildcard for elements entering, leaving, or moving within the list.
Think about how to define the starting and ending styles for your fade-in, slide-up, fade-out, and slide-down animations.
The challenge is to implement the core animation logic. You can create simple buttons or methods within your component to trigger the addition and removal of list items for testing purposes.