Vue.js List Transitions

This challenge focuses on implementing smooth visual transitions when items are added to or removed from a list in a Vue.js application. Mastering list transitions is crucial for creating dynamic and engaging user interfaces that provide a polished user experience.

Problem Description

Your task is to create a Vue component that displays a list of items and animates the addition and removal of these items. When a new item is added, it should smoothly appear, and when an item is removed, it should smoothly disappear. You will be using Vue's built-in <TransitionGroup> component to achieve this.

Key Requirements:

1. Display a List: The component should render an ordered or unordered list of items.
2. Add Items: Provide a mechanism (e.g., a button) to add new items to the list.
3. Remove Items: Provide a way to remove individual items from the list (e.g., a button next to each item).
4. Animate Additions: When a new item is added, it should have a transition effect (e.g., fade-in, slide-in).
5. Animate Removals: When an item is removed, it should also have a transition effect (e.g., fade-out, slide-out).
6. Unique Keys: Each item in the list must have a unique key attribute, which is essential for <TransitionGroup> to track and animate items correctly.

Expected Behavior:

• When the "Add Item" button is clicked, a new item appears in the list with a smooth animation.
• When the "Remove" button next to an item is clicked, that item disappears from the list with a smooth animation.
• The animations for adding and removing items should be distinct but consistent.

Edge Cases to Consider:

• An empty list.
• Adding multiple items in quick succession.
• Removing items while other animations are in progress.

Examples

Example 1: Initial State

Input: (No specific input, but consider the initial state of the component)
Output:
An empty list (or a list with a few initial items) and an "Add Item" button.
Explanation: The component is initialized, ready to display items and receive user interaction.

Example 2: Adding an Item

Input: User clicks the "Add Item" button.
Output:
A new item appears in the list. If the list was empty, it now has one item. If it had items, the new item is inserted, and existing items might shift. The new item animates into view (e.g., fades in from opacity 0 to 1).
Explanation: The `items` array in the component's state is updated, and Vue's `<TransitionGroup>` handles the animation.

Example 3: Removing an Item

Input: User clicks the "Remove" button next to an item in the list.
Output:
The clicked item animates out of view (e.g., fades out and slides up) and is then removed from the list.
Explanation: The `items` array is updated by removing the specific item. `<TransitionGroup>` detects the removal and animates it before it's fully unmounted.

Constraints

• The solution should be implemented using Vue.js 3 (Composition API or Options API, your choice) and TypeScript.
• The animations should be achievable using CSS transitions or animations.
• The component should handle a reasonable number of items (e.g., up to 50) without significant performance degradation.
• Each item in the list must have a unique key.

Notes

• Familiarize yourself with Vue's <Transition> and <TransitionGroup> components.
• Pay close attention to the name prop on <TransitionGroup> and how it relates to CSS class names for transitions.
• You'll need to define CSS classes for the transition states (e.g., item-enter-from, item-leave-to).
• Consider how the positioning of elements might be affected during transitions and how to manage it (e.g., using position: relative on the list container).
• The specific animation style (fade, slide, etc.) is up to you, but it should be clearly observable.