提交 | 用户 | age
|
62f846
|
1 |
import { defineConfig } from 'vite-plugin-windicss'; |
V |
2 |
import { primaryColor } from './build/config/themeConfig'; |
|
3 |
|
|
4 |
export default defineConfig({ |
189bc6
|
5 |
darkMode: 'class', |
893f3c
|
6 |
plugins: [createEnterPlugin()], |
ec9478
|
7 |
theme: { |
V |
8 |
extend: { |
893f3c
|
9 |
zIndex: { |
V |
10 |
'-1': '-1', |
c41fa7
|
11 |
}, |
acacb3
|
12 |
colors: { |
62f846
|
13 |
primary: primaryColor, |
893f3c
|
14 |
}, |
acacb3
|
15 |
screens: { |
V |
16 |
sm: '576px', |
|
17 |
md: '768px', |
|
18 |
lg: '992px', |
|
19 |
xl: '1200px', |
|
20 |
'2xl': '1600px', |
|
21 |
}, |
893f3c
|
22 |
}, |
ec9478
|
23 |
}, |
62f846
|
24 |
}); |
V |
25 |
|
ec9478
|
26 |
/** |
V |
27 |
* Used for animation when the element is displayed |
|
28 |
* @param maxOutput The larger the maxOutput output, the larger the generated css volume |
|
29 |
*/ |
090d84
|
30 |
function createEnterPlugin(maxOutput = 6) { |
62f846
|
31 |
const createCss = (index: number, d = 'x') => { |
ec9478
|
32 |
const upd = d.toUpperCase(); |
V |
33 |
return { |
|
34 |
[`*> .enter-${d}:nth-child(${index})`]: { |
|
35 |
transform: `translate${upd}(50px)`, |
|
36 |
}, |
|
37 |
[`*> .-enter-${d}:nth-child(${index})`]: { |
|
38 |
transform: `translate${upd}(-50px)`, |
|
39 |
}, |
|
40 |
[`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: { |
|
41 |
'z-index': `${10 - index}`, |
|
42 |
opacity: '0', |
|
43 |
animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`, |
|
44 |
'animation-fill-mode': 'forwards', |
|
45 |
'animation-delay': `${(index * 1) / 10}s`, |
|
46 |
}, |
|
47 |
}; |
|
48 |
}; |
|
49 |
const handler = ({ addBase }) => { |
8ccf77
|
50 |
const addRawCss = {}; |
ec9478
|
51 |
for (let index = 1; index < maxOutput; index++) { |
8ccf77
|
52 |
Object.assign(addRawCss, { |
ec9478
|
53 |
...createCss(index, 'x'), |
V |
54 |
...createCss(index, 'y'), |
|
55 |
}); |
|
56 |
} |
|
57 |
addBase({ |
8ccf77
|
58 |
...addRawCss, |
ec9478
|
59 |
[`@keyframes enter-x-animation`]: { |
V |
60 |
to: { |
|
61 |
opacity: '1', |
|
62 |
transform: 'translateX(0)', |
|
63 |
}, |
|
64 |
}, |
|
65 |
[`@keyframes enter-y-animation`]: { |
|
66 |
to: { |
|
67 |
opacity: '1', |
|
68 |
transform: 'translateY(0)', |
|
69 |
}, |
|
70 |
}, |
|
71 |
}); |
|
72 |
}; |
|
73 |
return { handler }; |
|
74 |
} |