Vue.js Basic Element Transition

This challenge focuses on implementing a fundamental visual effect in Vue.js: animating the appearance and disappearance of an element. Understanding transitions is crucial for creating more engaging and user-friendly web applications, providing smooth user experiences as content changes dynamically.

Problem Description

Your task is to create a Vue.js component that displays a piece of text. This text should toggle its visibility when a button is clicked. The toggling of visibility should be accompanied by a simple fade-in and fade-out transition using Vue's built-in <transition> component.

Key Requirements:

1. Toggle Visibility: The component must have a button that, when clicked, toggles the display of a text element.
2. Conditional Rendering: The text element should be conditionally rendered using v-if or v-show.
3. CSS Transitions: Implement a basic fade-in and fade-out effect for the text element using CSS. This should be achieved by applying transition classes provided by Vue's <transition> component.

Expected Behavior:

• Initially, the text is visible.
• Clicking the button hides the text with a fade-out animation.
• Clicking the button again shows the text with a fade-in animation.

Important Considerations:

• The transition should apply to the element's opacity.
• Ensure the transition is applied correctly using Vue's <transition> component.

Examples

Example 1:

• Initial State: The component displays "Hello, Vue Transitions!" and a "Toggle Text" button.
• User Action: Clicks the "Toggle Text" button.
• Output: The text "Hello, Vue Transitions!" smoothly fades out.
• Explanation: The v-leave-to CSS class (or equivalent default) is applied, reducing opacity to 0.

Example 2:

• State: The text "Hello, Vue Transitions!" is currently hidden. A "Toggle Text" button is visible.
• User Action: Clicks the "Toggle Text" button.
• Output: The text "Hello, Vue Transitions!" smoothly fades in.
• Explanation: The v-enter-to CSS class (or equivalent default) is applied, increasing opacity to 1.

Constraints

• The component should be written in TypeScript.
• Use Vue 3 Composition API.
• The transition duration can be set to a reasonable default (e.g., 0.5 seconds).
• The content of the text to be toggled is a simple string: "Hello, Vue Transitions!".

Notes

• Vue's <transition> component automatically handles applying CSS classes to manage the entering and leaving states of an element. You'll need to define the CSS for these classes.
• Consider the default transition classes provided by Vue: .v-enter-active, .v-leave-active, .v-enter-from, .v-enter-to, .v-leave-from, .v-leave-to. You can use custom names for the <transition> component for more control.
• Focus on the core functionality of the transition. You don't need to style the button beyond its basic appearance.