[Feature Request] Expand transition on both x and y axle at the same time

[TimoCuijpers]

Screen.Recording.Jan.30.2026.mp4

Problem to solve

The expand transition expands from top to bottom. The expand-x transition expands from left to right. The scale transition already has the box it expands to, reserved. So it doesn't gradually increase height and width.

The thing is, I really like the way the expand transition modifies the height and width of a child component.

Lets say for example I have an v-alert and I want the text to show only on hovering. The v-alert will be wider and higher when the text is displayed. If the height and width gradually increase on hovering, the user will experience a nice resize while hovering.

Now, or the width of the v-alert is static and the height grows gradually, or the height is static and the width increases gradually as the text appears.

Example:

<v-alert
  v-for="(notification, index) in displayedNotifications"
  :key="notification.id"
>
  <template #text>
    <v-expand-both-transition>
      <v-responsive v-show="isHovering">
        {{ notification.text }}
      </v-responsive>
    </v-expand-both-transition>
  </template>
</v-alert>

Proposed solution

Implement a <v-expand-both-transition> component that increases the width and height of the child element gradually like the <v-expand-transition> and <v-expand-x-transition>.

[J-Sek]

I was playing with pure-CSS transition, but the height jumps because of the text wrapping. It is only usable for stuff with fixed size, or when we can enforce the inner width.