docs(transition): fix duplicate transition name

Author: ikushum

packages/docs/src/examples/transitions/create-css-transition-component.vue

@@ -1,49 +1,49 @@
 <template>
   <v-container>
-    <v-row justify="center">
+    <v-row justify="center" style="min-height: 160px;">
       <v-col class="text-center">
         <v-btn
           color="primary"
           @click="show = !show"
         >
-          My Transition
+          Component Transition
         </v-btn>
 
-        <MyTransition>
+        <ComponentTransition>
           <v-card
             v-show="show"
-            width="100"
-            height="100"
-            color="secondary"
             class="mx-auto mt-5"
+            color="secondary"
+            height="100"
+            width="100"
           ></v-card>
-        </MyTransition>
+        </ComponentTransition>
       </v-col>
     </v-row>
   </v-container>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { createCssTransition } from 'vuetify/components/transitions';
+  import { ref } from 'vue'
+  import { createCssTransition } from 'vuetify/components/transitions'
 
-const MyTransition = createCssTransition('my-transition')
+  const ComponentTransition = createCssTransition('component-transition')
 
-const show = ref(false)
+  const show = ref(false)
 </script>
 
 <style lang="scss">
-.my-transition {
-  &-enter-active,
-  &-leave-active {
-    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  }
+  .component-transition {
+    &-enter-active,
+    &-leave-active {
+      transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    }
 
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: rotate(180deg) scale(0.2) skew(20deg);
-    filter: hue-rotate(90deg);
+    &-enter-from,
+    &-leave-to {
+      opacity: 0;
+      transform: rotate(180deg) scale(0.2) skew(20deg);
+      filter: hue-rotate(90deg);
+    }
   }
-}
 </style>

packages/docs/src/examples/transitions/create-css-transition-prop.vue

@@ -2,7 +2,7 @@
   <v-container>
     <v-row justify="center">
       <v-col class="text-center">
-        <v-menu transition="my-transition">
+        <v-menu transition="custom-prop-transition">
           <template v-slot:activator="{ props }">
             <v-btn
               color="primary"
@@ -29,14 +29,13 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { createCssTransition } from 'vuetify/components/transitions';
+  import { createCssTransition } from 'vuetify/components/transitions'
 
-const MyTransition = createCssTransition('my-transition')
+  createCssTransition('custom-prop-transition')
 </script>
 
 <style lang="scss">
-.my-transition {
+.custom-prop-transition {
   &-enter-active,
   &-leave-active {
     transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

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

@@ -115,7 +115,7 @@ You can use Vuetify's transition helper function to easily create your own custo
 ```js
 import { createCssTransition } from 'vuetify/components/transitions';
 
-const MyTransition = createCssTransition('my-transition')
+createCssTransition('my-transition')
 ```
 
 The argument passed to the **createCssTransition** function will be the name of the transition that you can hook into your style. This is an example of what `my-transition` looks like:
@@ -137,13 +137,13 @@ The argument passed to the **createCssTransition** function will be the name of
 
 You can now use this custom transition in a few different ways.
 
-#### As a component
+### As a component
 
 The **createCssTransition** function will return a component that you can use in your template.
 
 <ExamplesExample file="transitions/create-css-transition-component" />
 
-#### As a prop
+### As a prop
 
 Many of Vuetify’s components contain a **transition** prop. You can send the name of your custom transition to the transition prop.