Dynamic Transition Group with Custom Class and Visibility Control in Vue.js

This challenge focuses on implementing a Vue.js component that utilizes the <TransitionGroup> to dynamically add and remove elements with custom CSS transitions. The goal is to create a reusable component that allows for controlling the transition classes and visibility of elements entering and leaving the group, providing a flexible way to animate lists or other dynamic content. This is a common requirement in modern web applications for creating smooth and engaging user experiences.

Problem Description

You are tasked with creating a Vue.js component called DynamicTransitionGroup. This component should wrap a list of elements and animate their entry and exit using the <TransitionGroup> component. The component should accept the following props:

• items: An array of data items to be rendered within the transition group.
• enterClass: A string representing the CSS class to apply during the element's entering transition.
• leaveClass: A string representing the CSS class to apply during the element’s exiting transition.
• show: A boolean prop that controls the initial visibility of the transition group. If false, the group should be initially hidden.

The component should render each item in the items array as a separate element within the <TransitionGroup>. The enterClass and leaveClass props should be applied to the entering and leaving elements, respectively. The component should also handle the initial visibility based on the show prop.

Key Requirements:

• Use the <TransitionGroup> component for animating the elements.
• Apply the provided enterClass and leaveClass to the entering and leaving elements.
• Control the initial visibility of the entire transition group based on the show prop.
• Ensure the component renders all items from the items array.
• The component should be reusable and adaptable to different transition styles.

Expected Behavior:

• When the items array changes (e.g., items are added or removed), the <TransitionGroup> should automatically trigger the appropriate transitions for the affected elements.
• Elements entering the group should have the enterClass applied during their transition.
• Elements leaving the group should have the leaveClass applied during their transition.
• If show is false initially, the entire transition group should be hidden. Changes to show should trigger a transition to reveal or hide the group.

Edge Cases to Consider:

• Empty items array: The component should render nothing if the items array is empty.
• Initial show prop value: The component should correctly handle the initial visibility based on the show prop.
• Rapid changes to the items array: The transitions should still function correctly even with frequent updates to the items array.

Examples

Example 1:

Input: items = ['Item 1', 'Item 2', 'Item 3'], enterClass = 'fade-in', leaveClass = 'fade-out', show = true
Output: A list of three elements ('Item 1', 'Item 2', 'Item 3') animated with fade-in on entry and fade-out on exit, initially visible.
Explanation: The component renders the list with the specified transition classes and is initially visible.

Example 2:

Input: items = ['Item A', 'Item B'], enterClass = 'slide-left', leaveClass = 'slide-right', show = false
Output: A list of two elements ('Item A', 'Item B') animated with slide-left on entry and slide-right on exit, initially hidden.
Explanation: The component renders the list with the specified transition classes but is initially hidden.  Setting `show` to `true` will trigger a transition to reveal the list.

Example 3: (Edge Case)

Input: items = [], enterClass = 'zoom-in', leaveClass = 'zoom-out', show = true
Output: Nothing is rendered.
Explanation: The component handles the empty array case gracefully by rendering nothing.

Constraints

• The component must be written in TypeScript.
• The component should be self-contained and reusable.
• The transitions should be CSS-based (no JavaScript-based transitions).
• The component should be performant and avoid unnecessary re-renders.
• The items array can contain any type of data.

Notes

• Consider using the v-if directive on the <TransitionGroup> itself to control the initial visibility based on the show prop.
• The enterClass and leaveClass props are strings, so ensure they are correctly applied to the elements.
• You can use CSS classes like v-enter-active, v-leave-active, v-enter-from, v-enter-to, v-leave-from, and v-leave-to to further customize the transitions. However, the provided enterClass and leaveClass should be applied in addition to these default classes.
• Think about how to handle the case where the items array is initially empty.