first commit

resources/js/views/demos/components/snackbar/DemoSnackbarTransition.vue

@@ -0,0 +1,48 @@
+<script setup>
+const isSnackbarFadeVisible = ref(false)
+const isSnackbarScaleVisible = ref(false)
+const isSnackbarScrollReverseVisible = ref(false)
+</script>
+
+<template>
+  <div class="demo-space-x">
+    <!-- fade -->
+    <VBtn @click="isSnackbarFadeVisible = true">
+      fade snackbar
+    </VBtn>
+
+    <VSnackbar
+      v-model="isSnackbarFadeVisible"
+      transition="fade-transition"
+      location="top start"
+    >
+      I'm a fade transition snackbar.
+    </VSnackbar>
+
+    <!-- scale -->
+    <VBtn @click="isSnackbarScaleVisible = true">
+      Scale snackbar
+    </VBtn>
+
+    <VSnackbar
+      v-model="isSnackbarScaleVisible"
+      transition="scale-transition"
+      location="bottom end"
+    >
+      I'm a scale transition snackbar.
+    </VSnackbar>
+
+    <!-- scroll y reverse -->
+    <VBtn @click="isSnackbarScrollReverseVisible = true">
+      scroll y reverse
+    </VBtn>
+
+    <VSnackbar
+      v-model="isSnackbarScrollReverseVisible"
+      transition="scroll-y-reverse-transition"
+      location="top end"
+    >
+      I'm a scroll y reverse transition snackbar.
+    </VSnackbar>
+  </div>
+</template>