Skip to content

Commit 0b59486

Browse files
ExEr7umExEr7um
authored
feat: Add Vue Transition CSS snippets (#32)
* Vue transition css snippets #30 * Documentation #30
1 parent 79ee94d commit 0b59486

File tree

3 files changed

+131
-4
lines changed

3 files changed

+131
-4
lines changed

‎README.md

+13
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,19 @@ These snippets were made to speed up Vue 3 development. With it you can write bo
7979
| `vsingleemit` | Single emit for defineEmits |
8080
| `vsingleemit-nopayload` | Single emit for defineEmits with no payload |
8181

82+
### CSS
83+
84+
| Snippet | Purpose |
85+
| ---------------------------------- | -------------------------------------------- |
86+
| ⚠️ `vcss-transition` | Vue Transition styles |
87+
| ⚠️ `vcss-transition-named` | Vue Named Transition styles |
88+
| ⚠️ `vcss-transition-tailwind` | Vue Transition styles for Tailwind CSS |
89+
| ⚠️ `vcss-transition-named-tailwind` | Vue Named Transition styles for Tailwind CSS |
90+
| ⚠️ `vcss-transition-group` | Vue Transition Group styles |
91+
| ⚠️ `vcss-transition-group-tailwind` | Vue Transition Group styles for Tailwind CSS |
92+
93+
> Snippets with ⚠️ symbol are unreleased.
94+
8295
### Pinia
8396

8497
| Snippet | Purpose |

‎package.json

+16-4
Original file line numberDiff line numberDiff line change
@@ -65,19 +65,31 @@
6565
},
6666
{
6767
"language": "javascript",
68-
"path": "./snippets/pinia/pinia.code-snippets"
68+
"path": "./snippets/vue/vue-router.code-snippets"
6969
},
7070
{
7171
"language": "typescript",
72-
"path": "./snippets/pinia/pinia.code-snippets"
72+
"path": "./snippets/vue/vue-router.code-snippets"
73+
},
74+
{
75+
"language": "css",
76+
"path": "./snippets/vue/vue-css.code-snippets"
77+
},
78+
{
79+
"language": "scss",
80+
"path": "./snippets/vue/vue-css.code-snippets"
81+
},
82+
{
83+
"language": "less",
84+
"path": "./snippets/vue/vue-css.code-snippets"
7385
},
7486
{
7587
"language": "javascript",
76-
"path": "./snippets/vue/vue-router.code-snippets"
88+
"path": "./snippets/pinia/pinia.code-snippets"
7789
},
7890
{
7991
"language": "typescript",
80-
"path": "./snippets/vue/vue-router.code-snippets"
92+
"path": "./snippets/pinia/pinia.code-snippets"
8193
},
8294
{
8395
"language": "html",

‎snippets/vue/vue-css.code-snippets

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
{
2+
"Vue Transition": {
3+
"prefix": "vcss-transition",
4+
"body": [
5+
".v-enter-active,",
6+
".v-leave-active {",
7+
"\ttransition: opacity 0.5s ease;",
8+
"}",
9+
"",
10+
".v-enter-from,",
11+
".v-leave-to {",
12+
"\topacity: 0;",
13+
"}"
14+
],
15+
"description": "Vue Transition styles"
16+
},
17+
"Vue Named Transition": {
18+
"prefix": "vcss-transition-named",
19+
"body": [
20+
".${1:transitionName}-enter-active,",
21+
".${1:transitionName}-leave-active {",
22+
"\ttransition: opacity 0.5s ease;",
23+
"}",
24+
"",
25+
".${1:transitionName}-enter-from,",
26+
".${1:transitionName}-leave-to {",
27+
"\topacity: 0;",
28+
"}"
29+
],
30+
"description": "Vue Named Transition styles"
31+
},
32+
"Vue Transition - Tailwind": {
33+
"prefix": "vcss-transition-tailwind",
34+
"body": [
35+
".v-enter-active,",
36+
".v-leave-active {",
37+
"\t@apply transition duration-500;",
38+
"}",
39+
"",
40+
".v-enter-from,",
41+
".v-leave-to {",
42+
"\t@apply opacity-0;",
43+
"}"
44+
],
45+
"description": "Vue Transition styles for Tailwind CSS"
46+
},
47+
"Vue Named Transition - Tailwind": {
48+
"prefix": "vcss-transition-named-tailwind",
49+
"body": [
50+
".${1:transitionName}-enter-active,",
51+
".${1:transitionName}-leave-active {",
52+
"\t@apply transition duration-500;",
53+
"}",
54+
"",
55+
".${1:transitionName}-enter-from,",
56+
".${1:transitionName}-leave-to {",
57+
"\t@apply opacity-0;",
58+
"}"
59+
],
60+
"description": "Vue Named Transition styles for Tailwind CSS"
61+
},
62+
"Vue Transition Group": {
63+
"prefix": "vcss-transition-group",
64+
"body": [
65+
".${1:transitionName}-move,",
66+
".${1:transitionName}-enter-active,",
67+
".${1:transitionName}-leave-active {",
68+
"\ttransition: opacity 0.5s ease;",
69+
"}",
70+
"",
71+
".${1:transitionName}-enter-from,",
72+
".${1:transitionName}-leave-to {",
73+
"\topacity: 0;",
74+
"}",
75+
"",
76+
".${1:transitionName}-leave-active {",
77+
"\tposition: absolute;",
78+
"}"
79+
],
80+
"description": "Vue Transition Group styles"
81+
},
82+
"Vue Transition Group - Tailwind": {
83+
"prefix": "vcss-transition-group-tailwind",
84+
"body": [
85+
".${1:transitionName}-move,",
86+
".${1:transitionName}-enter-active,",
87+
".${1:transitionName}-leave-active {",
88+
"\t@apply transition duration-500;",
89+
"}",
90+
"",
91+
".${1:transitionName}-enter-from,",
92+
".${1:transitionName}-leave-to {",
93+
"\t@apply opacity-0;",
94+
"}",
95+
"",
96+
".${1:transitionName}-leave-active {",
97+
"\t@apply absolute;",
98+
"}"
99+
],
100+
"description": "Vue Transition Group styles for Tailwind CSS"
101+
}
102+
}

0 commit comments

Comments
 (0)