feat(transition): expose create transition classes (#21352)

Author: ikushum

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

@@ -0,0 +1,49 @@
+<template>
+  <v-container>
+    <v-row justify="center" style="min-height: 160px;">
+      <v-col class="text-center">
+        <v-btn
+          color="primary"
+          @click="show = !show"
+        >
+          Component Transition
+        </v-btn>
+
+        <ComponentTransition>
+          <v-card
+            v-show="show"
+            class="mx-auto mt-5"
+            color="secondary"
+            height="100"
+            width="100"
+          ></v-card>
+        </ComponentTransition>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import { createCssTransition } from 'vuetify/components/transitions'
+
+  const ComponentTransition = createCssTransition('component-transition')
+
+  const show = ref(false)
+</script>
+
+<style lang="scss">
+  .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);
+    }
+  }
+</style>

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

@@ -0,0 +1,53 @@
+<template>
+  <v-container>
+    <v-row justify="center">
+      <v-col class="text-center">
+        <v-menu transition="custom-prop-transition">
+          <template v-slot:activator="{ props }">
+            <v-btn
+              color="primary"
+              v-bind="props"
+            >
+              Prop Transition
+            </v-btn>
+          </template>
+
+          <v-list>
+            <v-list-item
+              v-for="n in 5"
+              :key="n"
+            >
+              <v-list-item-title>
+                Item {{ n }}
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+  import { createCssTransition } from 'vuetify/components/transitions'
+
+  createCssTransition('custom-prop-transition')
+</script>
+
+<style lang="scss">
+.custom-prop-transition {
+  &-enter-active,
+  &-leave-active {
+    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    transform-origin: top center;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: scaleY(0) rotateX(-60deg);
+    transform-origin: top center;
+    filter: saturate(2) hue-rotate(90deg);
+  }
+}
+</style>

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

@@ -108,30 +108,43 @@ Using multiple custom transitions, it is easy to bring a simple todo list to lif
 
 <ExamplesExample file="transitions/misc-todo" />
 
-<!--
 ## Create your own
 
-You can use Vuetify's transition helper function to easily create your own custom transitions. This function will return an object that you can import into Vue. Using Vue's [functional component](https://vuejs.org/v2/guide/render-function.html#Functional-Components) option will make sure your transition is as efficient as possible. Simply import the function:
+You can use Vuetify's transition helper function to easily create your own custom transitions.
 
 ```js
-import { createSimpleTransition } from 'vuetify/components/transitions/createTransition'
+import { createCssTransition } from 'vuetify/components/transitions';
 
-const myTransition = createSimpleTransition('my-transition')
+createCssTransition('my-transition')
+```
 
-Vue.component('my-transition', myTransition)
+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:
+
+```scss
+.my-transition {
+  &-enter-active,
+  &-leave-active {
+    position: absolute;
+    transition: 1s;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
 ```
 
-The **createSimpleTransition** function accepts 1 argument, name. This will be the name that you can hook into with your style. This is an example of what `v-fade-transition` looks like:
+You can now use this custom transition in a few different ways.
 
-```stylus
-.fade-transition
-  &-leave-active
-    position: absolute
+### As a component
 
-  &-enter-active, &-leave, &-leave-to
-    transition: $primary-transition
+The **createCssTransition** function will return a component that you can use in your template.
 
-  &-enter, &-leave-to
-    opacity: 0
-```
--->
+<ExamplesExample file="transitions/create-css-transition-component" />
+
+### 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.
+
+<ExamplesExample file="transitions/create-css-transition-prop" />

packages/vuetify/src/components/transitions/index.ts

@@ -43,3 +43,5 @@ export type VSlideYTransition = InstanceType<typeof VSlideYTransition>
 export type VSlideYReverseTransition = InstanceType<typeof VSlideYReverseTransition>
 export type VExpandTransition = InstanceType<typeof VExpandTransition>
 export type VExpandXTransition = InstanceType<typeof VExpandXTransition>
+
+export { createCssTransition, createJavascriptTransition }