From 3992fba61ad1b38bd44d0cbe77c5f82b48a323e5 Mon Sep 17 00:00:00 2001
From: Vasily Kuzin <exer7um@gmail.com>
Date: Sat, 15 Oct 2022 16:34:27 +0300
Subject: [PATCH 1/2] Vue transition css snippets #30

---
 package.json                       |  20 ++++--
 snippets/vue/vue-css.code-snippets | 102 +++++++++++++++++++++++++++++
 2 files changed, 118 insertions(+), 4 deletions(-)
 create mode 100644 snippets/vue/vue-css.code-snippets

diff --git a/package.json b/package.json
index 56bb066..eed7e24 100644
--- a/package.json
+++ b/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",
diff --git a/snippets/vue/vue-css.code-snippets b/snippets/vue/vue-css.code-snippets
new file mode 100644
index 0000000..89a4dbd
--- /dev/null
+++ b/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"
+  }
+}

From 05520972f26b8f2ae4db5f568ebfb505fc67fa7c Mon Sep 17 00:00:00 2001
From: Vasily Kuzin <exer7um@gmail.com>
Date: Sat, 15 Oct 2022 16:33:36 +0300
Subject: [PATCH 2/2] Documentation #30

---
 README.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/README.md b/README.md
index 9398912..ce7f80f 100644
--- a/README.md
+++ b/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                                                      |