Angular Component Transition Animation

This challenge focuses on implementing visually appealing animations for elements entering and leaving the DOM in an Angular application. You will create a reusable Angular component that manages a list of items, allowing new items to be added and existing items to be removed, with smooth transition animations applied to these changes. This is a fundamental technique for enhancing user experience and creating dynamic web interfaces.

Problem Description

Your task is to build an Angular component called AnimatedListComponent that displays a list of items. When items are added to or removed from this list, they should animate smoothly in and out of view using Angular's built-in animation capabilities.

Key Requirements:

1. Component Structure: Create an Angular component named AnimatedListComponent that accepts an array of data (e.g., strings, objects) as an @Input().
2. Displaying Items: The component should render each item in the provided input array.
3. Enter Animation: When a new item is added to the list (i.e., the @Input() array changes and a new item appears), it should fade in from the opacity of 0 to 1 and slide in slightly from the bottom.
4. Leave Animation: When an item is removed from the list (i.e., an item is no longer present in the @Input() array), it should fade out from opacity 1 to 0 and slide out slightly to the bottom before being removed from the DOM.
5. Animation Triggers: The animations should be triggered automatically when the @Input() array is updated.
6. Reusability: The component should be designed to be reusable with different types of data and in various parts of an Angular application.

Expected Behavior:

• When the component is initialized with a list of items, they should appear without any animation.
• When an item is added to the list (e.g., by updating the parent component's data), the new item should smoothly animate into view.
• When an item is removed from the list, it should smoothly animate out of view before disappearing.
• The order of remaining items should not be affected by the animations of other items.

Edge Cases:

• Empty List: The component should gracefully handle an empty input array.
• Rapid Additions/Removals: Consider how the animations might behave if items are added and removed very quickly in succession. The animations should ideally be able to handle these scenarios without visual glitches.
• Different Data Types: While the example uses strings, the component should be robust enough to handle other simple data types or objects where a unique identifier can be used for tracking.

Examples

Example 1: Adding an item

Input: Parent Component's data array: ['Apple', 'Banana'] Then, parent updates to: ['Apple', 'Banana', 'Cherry']

Expected Output (Visual): Initially, "Apple" and "Banana" are visible. When "Cherry" is added, it fades in from opacity 0 to 1 and slides up from below, appearing below "Banana".

Explanation: The new item "Cherry" is recognized by Angular as new and triggers its entry animation.

Example 2: Removing an item

Input: Parent Component's data array: ['Apple', 'Banana', 'Cherry'] Then, parent updates to: ['Apple', 'Cherry']

Expected Output (Visual): Initially, "Apple", "Banana", and "Cherry" are visible. When "Banana" is removed, it fades out from opacity 1 to 0 and slides down before disappearing. "Apple" and "Cherry" remain in their positions.

Explanation: The item "Banana" is no longer present in the updated array, triggering its exit animation.

Example 3: Handling Rapid Changes

Input: Parent Component's data array: ['Item 1'] Then, parent updates rapidly to:

1. ['Item 1', 'Item 2']
2. ['Item 2']

Expected Output (Visual): "Item 1" appears. Then, "Item 2" animates in. Immediately after, "Item 1" animates out, and "Item 2" remains.

Explanation: Angular's animation system should manage overlapping or sequential animations efficiently.

Constraints

• The Angular version to be used is Angular 14 or higher.
• The solution must use Angular's @angular/animations module.
• The component should be implemented in TypeScript.
• The animation for entering and leaving items should take approximately 300ms to complete.
• The animation should involve a change in opacity and a slight vertical translation.
• Each item in the list must have a unique identifier (e.g., a string or a number) for Angular to track them effectively during list updates. This will be managed using trackBy in the template.

Notes

• You will need to import and configure the BrowserAnimationsModule in your Angular application's root module.
• The @angular/animations module provides functions like trigger, state, style, animate, transition, and query that will be crucial for this challenge.
• Think about how to use query and stagger to apply animations to multiple items if they are added or removed simultaneously.
• The trackBy function in your template is essential for Angular to efficiently identify which items have been added, removed, or moved, which in turn triggers the correct animations.
• Consider using relative positioning for the list container to ensure the absolute positioning within the animations works as expected.