Vue.js Dynamic Component Transitions

This challenge focuses on implementing smooth visual transitions between different Vue.js components. You will build a component that dynamically switches between two distinct UI states, animating the change to provide a more engaging user experience. This is a fundamental aspect of modern web development, enhancing usability and aesthetics.

Problem Description

Your task is to create a Vue.js component that displays either a "Welcome" message or a "Goodbye" message. The component should allow toggling between these two states. Crucially, when switching from one message to the other, a visual transition should be applied to make the change feel smooth and natural rather than abrupt.

Key Requirements:

1. Dynamic Component Rendering: Use Vue's built-in <component :is="..."> feature to render either the "Welcome" or "Goodbye" component based on a reactive state.
2. Transition Implementation: Employ Vue's <transition> component to wrap the dynamic component. Apply CSS classes to define the entry and exit animations for the components.
3. State Management: Implement a simple mechanism (e.g., a button click) to toggle the displayed component between "Welcome" and "Goodbye."
4. CSS Styling: Provide basic CSS to style the messages and define the transition animations.

Expected Behavior:

• Initially, the "Welcome" component should be displayed.
• Clicking a designated button should trigger a transition to display the "Goodbye" component.
• Clicking the button again should transition back to the "Welcome" component.
• During the transition (e.g., switching from "Welcome" to "Goodbye"), the "Welcome" component should fade out while the "Goodbye" component fades in. The exact animation (fade, slide, etc.) is up to you, but a clear visual transition is required.

Edge Cases:

• Ensure the transition works reliably in both directions (Welcome -> Goodbye and Goodbye -> Welcome).
• Consider how the transition behaves if the user clicks the toggle button rapidly multiple times. The transition should ideally handle concurrent transitions gracefully.

Examples

Example 1: Initial State

• Input: (No explicit input, component is rendered)
• Output: The "Welcome" component is displayed.
• Explanation: The component initializes with its default state.

Example 2: Toggling to Goodbye

• Input: User clicks the "Toggle Message" button.
• Output: The "Welcome" component animates out, and the "Goodbye" component animates in. The "Goodbye" message is then visible.
• Explanation: The reactive state changes, causing Vue to swap the components. The <transition> component intercepts this change and applies the defined CSS animations.

Example 3: Toggling Back to Welcome

• Input: User clicks the "Toggle Message" button again.
• Output: The "Goodbye" component animates out, and the "Welcome" component animates in. The "Welcome" message is then visible.
• Explanation: The reactive state reverts, and the transition process repeats in the reverse direction.

Constraints

• The application should be built using Vue.js 3 and TypeScript.
• The transition effect should be noticeable and not instantaneous.
• The solution should not rely on external animation libraries like GSAP, unless you are specifically adding it as an advanced feature beyond the core requirement.
• The primary focus is on understanding and implementing Vue's built-in <transition> component.

Notes

• Vue's <transition> component works by adding and removing CSS classes at specific points in the component's lifecycle. Common classes include v-enter-from, v-enter-active, v-enter-to, v-leave-from, v-leave-active, and v-leave-to.
• You can also use Vue's <transition-group> for animating lists of items, but for this challenge, <transition> is sufficient.
• Consider how to manage the key attribute on the dynamically rendered component. This is often crucial for Vue to correctly identify when a component is being entirely replaced, which is necessary for transitions to work as expected.
• A simple fade transition is a good starting point, but feel free to experiment with other CSS animations like sliding or scaling.