Dynamic Button Styling with CSS Transitions in Vue

This challenge focuses on implementing smooth CSS transitions in a Vue.js component to enhance user experience. You'll be creating a button that changes color and size upon being clicked, utilizing Vue's reactivity and CSS transitions for a visually appealing effect. This is a common requirement in modern web development, and mastering it is crucial for building interactive and engaging interfaces.

Problem Description

You are tasked with creating a Vue component called AnimatedButton. This component should display a button with initial styling (a default background color and size). When the button is clicked, it should transition smoothly to a different background color and a larger size. The transition should be visually appealing and take a reasonable amount of time (e.g., 0.3 seconds). The component should use Vue's reactivity system to manage the button's state (e.g., whether it's active or not) and trigger the transition.

Key Requirements:

Component Structure: Create a Vue component named AnimatedButton.
Initial Styling: The button should have a default background color (e.g., lightblue) and a default size (e.g., width: 100px, height: 50px).
Click Handling: The button should trigger a state change (e.g., isActive) when clicked.
CSS Transitions: Use CSS transitions to animate the background color and size changes. The transition duration should be configurable (e.g., 300ms).
Reactivity: Utilize Vue's reactivity system to bind the button's styling to the component's state.
TypeScript: The component must be written in TypeScript.

Expected Behavior:

The component renders a button with the default styling.
When the button is clicked, the isActive state changes.
The button smoothly transitions to a different background color (e.g., orange) and a larger size (e.g., width: 150px, height: 75px) over the specified transition duration.
When the button is clicked again, it smoothly transitions back to the default styling.

Edge Cases to Consider:

Ensure the transition is smooth and doesn't appear jerky.
Consider how the transition will look with different transition durations.
Think about how to make the transition duration configurable.

Examples

Example 1:

Input: Initial state: button with lightblue background and 100x50 size. Clicked once.
Output: Button transitions to orange background and 150x75 size.
Explanation: The `isActive` state changes, triggering the CSS transition to the new styling.

Example 2:

Input: Initial state: button with orange background and 150x75 size. Clicked once.
Output: Button transitions back to lightblue background and 100x50 size.
Explanation: The `isActive` state changes back to its original value, triggering the transition back to the default styling.

Example 3: (Configurable Transition Duration)

Input: Transition duration set to 500ms. Initial state: button with lightblue background and 100x50 size. Clicked once.
Output: Button transitions to orange background and 150x75 size over 500ms.
Explanation: The transition duration is respected, resulting in a slower, more gradual animation.

Constraints

The component must be written in TypeScript.
The transition duration should be configurable via a prop (e.g., transitionDuration). Default to 300ms if not provided.
The background colors should be configurable via props (e.g., defaultColor, activeColor). Default to lightblue and orange respectively.
The size changes should be configurable via props (e.g., defaultWidth, defaultHeight, activeWidth, activeHeight). Default to 100x50 and 150x75 respectively.
The component should be self-contained and reusable.

Notes

Consider using Vue's class binding to conditionally apply CSS classes that define the different states of the button.
You can use CSS transition property directly in the component's style or use a separate CSS file.
Focus on creating a clean and maintainable component structure.
Think about how to make the component more flexible and customizable in the future. Props are your friend!