docs(transitions): add guidance on using padding with expand transitions (#22121)

Add guidance on using padding with expand transitions

Author: antonhansson0624

packages/docs/src/examples/transitions/misc-expand-x-padding.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-btn class="ma-2" color="primary" @click="expand = !expand">
+        Expand Transition
+      </v-btn>
+
+      <v-expand-x-transition>
+        <v-responsive v-show="expand" width="fit-content">
+          <v-alert
+            class="text-no-wrap"
+            text="Smooth transition here"
+            type="info"
+          ></v-alert>
+        </v-responsive>
+      </v-expand-x-transition>
+    </v-container>
+  </v-app>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const expand = ref(false)
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      expand: false,
+    }),
+  }
+</script>

packages/docs/src/pages/en/styles/transitions.md

@@ -60,6 +60,12 @@ The expand transition is used in Expansion Panels and List Groups. There is also
 
 <ExamplesExample file="transitions/misc-expand-x" />
 
+When using `v-expand-transition` or `v-expand-x-transition`, the transition works by animating an element’s height or width between `0` and its natural size. Because of this, applying **padding directly to the transitioning element** (such as `v-alert`) can cause jittery or uneven animations.
+
+If you need padding, wrap your content in a container element (like a `div` or `v-card`) and apply the transition to that container instead. This ensures the expand transition runs smoothly, since the wrapper div has no conflicting padding or margin.
+
+<ExamplesExample file="transitions/misc-expand-x-padding" />
+
 #### Fab
 
 An example of the fab transition can be found in the `v-speed-dial` component.