Angular Animation Playground

This challenge focuses on implementing various animations within an Angular application. Understanding and applying animations is crucial for creating engaging and user-friendly web interfaces, improving the perceived performance, and guiding user attention effectively.

Problem Description

You are tasked with building a simple Angular component that displays a list of items. Each item should have distinct animations applied to it when it enters the DOM, leaves the DOM, and when its state changes. You will need to leverage Angular's built-in animation capabilities to achieve this.

Key Requirements:

1. Item Entry Animation: When an item is added to the list, it should fade in and slide from the right.
2. Item Exit Animation: When an item is removed from the list, it should fade out and slide to the left.
3. Item State Change Animation: When a specific "highlight" property of an item changes (e.g., toggled on/off), the item should subtly scale up and down.
4. Component Structure: The solution should be implemented within a single Angular component.
5. Triggering Animations: You'll need to implement buttons or interactions to add, remove, and toggle the highlight state of items to demonstrate the animations.

Expected Behavior:

• A list of items is initially displayed.
• Clicking an "Add Item" button adds a new item to the list, which animates in.
• Clicking a "Remove" button next to an item removes that item, which animates out.
• Clicking a "Highlight" button next to an item toggles its highlight state, triggering a scaling animation.
• The animations should be smooth and visually appealing.

Edge Cases:

• Rapid addition/removal of items should not break the animation system.
• Consider how animations behave when the list is empty.

Examples

Example 1: Item Entry and Exit

Initial State: An empty list.

User Action: Clicks "Add Item". A new item appears.

Animation: The new item fades in from opacity 0 to 1 and slides in from the right (e.g., transform: translateX(100%) to transform: translateX(0)).

User Action: Clicks "Remove" on the added item.

Animation: The item fades out and slides to the left (e.g., transform: translateX(0) to transform: translateX(-100%)).

Example 2: State Change Animation

Initial State: A list with one item, not highlighted.

User Action: Clicks "Highlight" on the item.

Animation: The item briefly scales up (e.g., transform: scale(1.1)) and then returns to its normal size (transform: scale(1)).

User Action: Clicks "Highlight" again on the same item.

Animation: The same scaling animation occurs.

Constraints

• Angular version: Latest stable version (as of the time of challenge creation).
• TypeScript version: Compatible with the latest stable Angular.
• Animation triggers: Use animate and state-based triggers like transition and animateChild.
• No external animation libraries (e.g., GreenSock) should be used. Rely on Angular's core animation module.
• The solution should be self-contained within a single component for demonstration purposes.

Notes

• You will need to import BrowserAnimationsModule into your AppModule or the relevant module for animations to work.
• The angular/animations package must be installed (npm install @angular/animations).
• Consider using the query and stagger functions for animating lists of elements to create a more dynamic effect.
• Think about how to manage the state of your items to trigger the appropriate animations. A simple array of objects with properties for data and highlight status will suffice.
• You'll likely use the trigger function to define your animation sequences.