Vue Transition Group: Dynamic List Animation

This challenge focuses on implementing dynamic list animations in Vue.js using the <TransitionGroup> component. You will create a component that allows users to add and remove items from a list, with smooth visual transitions between the list's states. This is a common requirement for creating more engaging and user-friendly interfaces.

Problem Description

Your task is to build a Vue component that manages a list of items. When items are added or removed from this list, they should animate into and out of their positions. You will leverage Vue's built-in <TransitionGroup> component to achieve this.

Key Requirements:

• Dynamic List: The component should display a list of items. Users should be able to add new items and remove existing items from the list.
• v-for with key: The list items must be rendered using v-for, and each item must have a unique key attribute.
• <TransitionGroup>: All list items should be wrapped within a single <TransitionGroup> component.
• CSS Transitions/Animations: Implement basic CSS transitions or animations for the enter-active-class, leave-active-class, and move-class attributes of the <TransitionGroup>.
• TypeScript: The entire solution should be written in TypeScript.

Expected Behavior:

1. Adding an Item: When a new item is added to the list, it should smoothly appear in its designated position.
2. Removing an Item: When an item is removed from the list, it should smoothly animate out of its position before disappearing.
3. Reordering: If the order of items changes (e.g., due to sorting or adding/removing items at different positions), existing items should smoothly animate to their new positions.

Edge Cases to Consider:

• An empty list.
• Rapidly adding and removing items.

Examples

Example 1: Adding and Removing Items

Initial State (UI): An empty list.

User Action: Click an "Add Item" button.

Input (Internal state): items: ['Item 1']

Expected Output (UI): A list with "Item 1" smoothly appearing.

User Action: Click an "Add Item" button again.

Input (Internal state): items: ['Item 1', 'Item 2']

Expected Output (UI): "Item 2" smoothly appears after "Item 1".

User Action: Click a "Remove" button next to "Item 1".

Input (Internal state): items: ['Item 2']

Expected Output (UI): "Item 1" smoothly animates out, and "Item 2" smoothly animates to the first position.

Example 2: Reordering (Implicit)

Initial State (UI): A list with "Item A", "Item B", "Item C".

User Action: Add a new item at the beginning.

Input (Internal state): items: ['New Item', 'Item A', 'Item B', 'Item C']

Expected Output (UI): "New Item" smoothly appears at the beginning. "Item A", "Item B", and "Item C" smoothly animate to their new positions.

Constraints

• The list can contain a maximum of 100 items.
• The component should be a Vue 3 Single File Component (SFC) using the <script setup> syntax.
• CSS transition durations should be between 0.3s and 1s.
• The solution must use TypeScript.

Notes

• Remember that <TransitionGroup> requires a tag attribute to specify the DOM element that will wrap the transitioning elements (e.g., <ul>, <ol>).
• The key attribute is crucial for Vue to track each element individually during transitions.
• You'll need to define CSS classes that trigger the transitions for entering, leaving, and moving elements. Consider using simple opacity and transform properties for the animations.
• Think about how you will manage the data for the list items. A simple array of strings or objects will suffice for this challenge.