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