Add Vue Transition CSS snippets

README.md

@@ -79,6 +79,19 @@ These snippets were made to speed up Vue 3 development. With it you can write bo
 | `vsingleemit`            | Single emit for defineEmits                 |
 | `vsingleemit-nopayload`  | Single emit for defineEmits with no payload |
 
+### CSS
+
+| Snippet                            | Purpose                                      |
+| ---------------------------------- | -------------------------------------------- |
+| ⚠️ `vcss-transition`                | Vue Transition styles                        |
+| ⚠️ `vcss-transition-named`          | Vue Named Transition styles                  |
+| ⚠️ `vcss-transition-tailwind`       | Vue Transition styles for Tailwind CSS       |
+| ⚠️ `vcss-transition-named-tailwind` | Vue Named Transition styles for Tailwind CSS |
+| ⚠️ `vcss-transition-group`          | Vue Transition Group styles                  |
+| ⚠️ `vcss-transition-group-tailwind` | Vue Transition Group styles for Tailwind CSS |
+
+> Snippets with ⚠️ symbol are unreleased.
+
 ### Pinia
 
 | Snippet                | Purpose                                                      |

package.json

@@ -65,19 +65,31 @@
       },
       {
         "language": "javascript",
-        "path": "./snippets/pinia/pinia.code-snippets"
+        "path": "./snippets/vue/vue-router.code-snippets"
       },
       {
         "language": "typescript",
-        "path": "./snippets/pinia/pinia.code-snippets"
+        "path": "./snippets/vue/vue-router.code-snippets"
+      },
+      {
+        "language": "css",
+        "path": "./snippets/vue/vue-css.code-snippets"
+      },
+      {
+        "language": "scss",
+        "path": "./snippets/vue/vue-css.code-snippets"
+      },
+      {
+        "language": "less",
+        "path": "./snippets/vue/vue-css.code-snippets"
       },
       {
         "language": "javascript",
-        "path": "./snippets/vue/vue-router.code-snippets"
+        "path": "./snippets/pinia/pinia.code-snippets"
       },
       {
         "language": "typescript",
-        "path": "./snippets/vue/vue-router.code-snippets"
+        "path": "./snippets/pinia/pinia.code-snippets"
       },
       {
         "language": "html",

snippets/vue/vue-css.code-snippets

@@ -0,0 +1,102 @@
+{
+  "Vue Transition": {
+    "prefix": "vcss-transition",
+    "body": [
+      ".v-enter-active,",
+      ".v-leave-active {",
+      "\ttransition: opacity 0.5s ease;",
+      "}",
+      "",
+      ".v-enter-from,",
+      ".v-leave-to {",
+      "\topacity: 0;",
+      "}"
+    ],
+    "description": "Vue Transition styles"
+  },
+  "Vue Named Transition": {
+    "prefix": "vcss-transition-named",
+    "body": [
+      ".${1:transitionName}-enter-active,",
+      ".${1:transitionName}-leave-active {",
+      "\ttransition: opacity 0.5s ease;",
+      "}",
+      "",
+      ".${1:transitionName}-enter-from,",
+      ".${1:transitionName}-leave-to {",
+      "\topacity: 0;",
+      "}"
+    ],
+    "description": "Vue Named Transition styles"
+  },
+  "Vue Transition - Tailwind": {
+    "prefix": "vcss-transition-tailwind",
+    "body": [
+      ".v-enter-active,",
+      ".v-leave-active {",
+      "\t@apply transition duration-500;",
+      "}",
+      "",
+      ".v-enter-from,",
+      ".v-leave-to {",
+      "\t@apply opacity-0;",
+      "}"
+    ],
+    "description": "Vue Transition styles for Tailwind CSS"
+  },
+  "Vue Named Transition - Tailwind": {
+    "prefix": "vcss-transition-named-tailwind",
+    "body": [
+      ".${1:transitionName}-enter-active,",
+      ".${1:transitionName}-leave-active {",
+      "\t@apply transition duration-500;",
+      "}",
+      "",
+      ".${1:transitionName}-enter-from,",
+      ".${1:transitionName}-leave-to {",
+      "\t@apply opacity-0;",
+      "}"
+    ],
+    "description": "Vue Named Transition styles for Tailwind CSS"
+  },
+  "Vue Transition Group": {
+    "prefix": "vcss-transition-group",
+    "body": [
+      ".${1:transitionName}-move,",
+      ".${1:transitionName}-enter-active,",
+      ".${1:transitionName}-leave-active {",
+      "\ttransition: opacity 0.5s ease;",
+      "}",
+      "",
+      ".${1:transitionName}-enter-from,",
+      ".${1:transitionName}-leave-to {",
+      "\topacity: 0;",
+      "}",
+      "",
+      ".${1:transitionName}-leave-active {",
+      "\tposition: absolute;",
+      "}"
+    ],
+    "description": "Vue Transition Group styles"
+  },
+  "Vue Transition Group - Tailwind": {
+    "prefix": "vcss-transition-group-tailwind",
+    "body": [
+      ".${1:transitionName}-move,",
+      ".${1:transitionName}-enter-active,",
+      ".${1:transitionName}-leave-active {",
+      "\t@apply transition duration-500;",
+      "}",
+      "",
+      ".${1:transitionName}-enter-from,",
+      ".${1:transitionName}-leave-to {",
+      "\t@apply opacity-0;",
+      "}",
+      "",
+      ".${1:transitionName}-leave-active {",
+      "\t@apply absolute;",
+      "}"
+    ],
+    "description": "Vue Transition Group styles for Tailwind CSS"
+  }
+}