Skip to content

Commit bab4d48

Browse files
hunghg255hunghg255
authored
Merge pull request #193 from hunghg255/fix-animate
fix: overwirte animate
2 parents 7e2ad9a + 6b18f50 commit bab4d48

File tree

5 files changed

+190
-13
lines changed

5 files changed

+190
-13
lines changed

‎animate.js

+188
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
const plugin = require("tailwindcss/plugin")
2+
3+
function filterDefault(values) {
4+
return Object.fromEntries(
5+
Object.entries(values).filter(([key]) => key !== "DEFAULT"),
6+
)
7+
}
8+
9+
module.exports = plugin(
10+
({ addUtilities, matchUtilities, theme }) => {
11+
addUtilities({
12+
"@keyframes aenter": theme("keyframes.enter"),
13+
"@keyframes aexit": theme("keyframes.exit"),
14+
".animate-in": {
15+
animationName: "aenter",
16+
animationDuration: theme("animationDuration.DEFAULT"),
17+
"--tw-enter-opacity": "initial",
18+
"--tw-enter-scale": "initial",
19+
"--tw-enter-rotate": "initial",
20+
"--tw-enter-translate-x": "initial",
21+
"--tw-enter-translate-y": "initial",
22+
},
23+
".animate-out": {
24+
animationName: "aexit",
25+
animationDuration: theme("animationDuration.DEFAULT"),
26+
"--tw-exit-opacity": "initial",
27+
"--tw-exit-scale": "initial",
28+
"--tw-exit-rotate": "initial",
29+
"--tw-exit-translate-x": "initial",
30+
"--tw-exit-translate-y": "initial",
31+
},
32+
})
33+
34+
matchUtilities(
35+
{
36+
"fade-in": (value) => ({ "--tw-enter-opacity": value }),
37+
"fade-out": (value) => ({ "--tw-exit-opacity": value }),
38+
},
39+
{ values: theme("animationOpacity") },
40+
)
41+
42+
matchUtilities(
43+
{
44+
"zoom-in": (value) => ({ "--tw-enter-scale": value }),
45+
"zoom-out": (value) => ({ "--tw-exit-scale": value }),
46+
},
47+
{ values: theme("animationScale") },
48+
)
49+
50+
matchUtilities(
51+
{
52+
"spin-in": (value) => ({ "--tw-enter-rotate": value }),
53+
"spin-out": (value) => ({ "--tw-exit-rotate": value }),
54+
},
55+
{ values: theme("animationRotate") },
56+
)
57+
58+
matchUtilities(
59+
{
60+
"slide-in-from-top": (value) => ({
61+
"--tw-enter-translate-y": `-${value}`,
62+
}),
63+
"slide-in-from-bottom": (value) => ({
64+
"--tw-enter-translate-y": value,
65+
}),
66+
"slide-in-from-left": (value) => ({
67+
"--tw-enter-translate-x": `-${value}`,
68+
}),
69+
"slide-in-from-right": (value) => ({
70+
"--tw-enter-translate-x": value,
71+
}),
72+
"slide-out-to-top": (value) => ({
73+
"--tw-exit-translate-y": `-${value}`,
74+
}),
75+
"slide-out-to-bottom": (value) => ({
76+
"--tw-exit-translate-y": value,
77+
}),
78+
"slide-out-to-left": (value) => ({
79+
"--tw-exit-translate-x": `-${value}`,
80+
}),
81+
"slide-out-to-right": (value) => ({
82+
"--tw-exit-translate-x": value,
83+
}),
84+
},
85+
{ values: theme("animationTranslate") },
86+
)
87+
88+
matchUtilities(
89+
{ duration: (value) => ({ animationDuration: value }) },
90+
{ values: filterDefault(theme("animationDuration")) },
91+
)
92+
93+
matchUtilities(
94+
{ delay: (value) => ({ animationDelay: value }) },
95+
{ values: theme("animationDelay") },
96+
)
97+
98+
matchUtilities(
99+
{ ease: (value) => ({ animationTimingFunction: value }) },
100+
{ values: filterDefault(theme("animationTimingFunction")) },
101+
)
102+
103+
addUtilities({
104+
".running": { animationPlayState: "running" },
105+
".paused": { animationPlayState: "paused" },
106+
})
107+
108+
matchUtilities(
109+
{ "fill-mode": (value) => ({ animationFillMode: value }) },
110+
{ values: theme("animationFillMode") },
111+
)
112+
113+
matchUtilities(
114+
{ direction: (value) => ({ animationDirection: value }) },
115+
{ values: theme("animationDirection") },
116+
)
117+
118+
matchUtilities(
119+
{ repeat: (value) => ({ animationIterationCount: value }) },
120+
{ values: theme("animationRepeat") },
121+
)
122+
},
123+
{
124+
theme: {
125+
extend: {
126+
animationDelay: ({ theme }) => ({
127+
...theme("transitionDelay"),
128+
}),
129+
animationDuration: ({ theme }) => ({
130+
0: "0ms",
131+
...theme("transitionDuration"),
132+
}),
133+
animationTimingFunction: ({ theme }) => ({
134+
...theme("transitionTimingFunction"),
135+
}),
136+
animationFillMode: {
137+
none: "none",
138+
forwards: "forwards",
139+
backwards: "backwards",
140+
both: "both",
141+
},
142+
animationDirection: {
143+
normal: "normal",
144+
reverse: "reverse",
145+
alternate: "alternate",
146+
"alternate-reverse": "alternate-reverse",
147+
},
148+
animationOpacity: ({ theme }) => ({
149+
DEFAULT: 0,
150+
...theme("opacity"),
151+
}),
152+
animationTranslate: ({ theme }) => ({
153+
DEFAULT: "100%",
154+
...theme("translate"),
155+
}),
156+
animationScale: ({ theme }) => ({
157+
DEFAULT: 0,
158+
...theme("scale"),
159+
}),
160+
animationRotate: ({ theme }) => ({
161+
DEFAULT: "30deg",
162+
...theme("rotate"),
163+
}),
164+
animationRepeat: {
165+
0: "0",
166+
1: "1",
167+
infinite: "infinite",
168+
},
169+
keyframes: {
170+
enter: {
171+
from: {
172+
opacity: "var(--tw-enter-opacity, 1)",
173+
transform:
174+
"translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))",
175+
},
176+
},
177+
exit: {
178+
to: {
179+
opacity: "var(--tw-exit-opacity, 1)",
180+
transform:
181+
"translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))",
182+
},
183+
},
184+
},
185+
},
186+
},
187+
},
188+
)

‎eslint.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default [
1919
'contributorkit.config.ts',
2020
'tailwind.config.js',
2121
'postcss.config.js',
22+
'animate.js',
2223
'playground/**'
2324
],
2425
},

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,6 @@
226226
"sass": "^1.86.2",
227227
"tailwind-merge": "^2.6.0",
228228
"tailwindcss": "^3.4.17",
229-
"tailwindcss-animate": "^1.0.7",
230229
"typescript": "^5.8.2",
231230
"verify-commit-msg": "^0.0.14",
232231
"vite": "^6.2.4",

‎pnpm-lock.yaml

-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tailwind.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import animate from 'tailwindcss-animate'
1+
import animate from './animate'
22

33
/** @type {import('tailwindcss').Config} */
44
export default {

0 commit comments

Comments
 (0)