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