-
Notifications
You must be signed in to change notification settings - Fork 12
/
uno.config.ts
82 lines (78 loc) · 1.99 KB
/
uno.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import type { Preset } from 'unocss'
import {
defineConfig,
presetAttributify,
presetIcons,
presetUno,
toEscapedSelector,
transformerDirectives,
transformerVariantGroup,
} from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'
export default defineConfig({
presets: [
presetUno(),
presetAttributify(),
presetIcons(),
presetRemToPx(),
createEnterPlugin(),
],
shortcuts: {
'flex-center': 'flex justify-center items-center',
},
transformers: [
transformerVariantGroup(),
transformerDirectives(),
],
})
/**
* 用于元素显示时的动画
* @param maxOutput MaxOutput输出越大,生成的css体积就越大。
*/
function createEnterPlugin(maxOutput = 2): Preset {
const createCss = (index: number, d: string, selector: string) => {
const upd = d.toUpperCase()
return `
*>${selector}:nth-child(${index}){
transform: translate${upd}(50px);
}
*>.-enter-${d}:nth-child(${index}) {
transform: translate${upd}(-50px);
}
*>${selector}:nth-child(${index}),*>.-enter-${d}:nth-child(${index}){
z-index: ${10 - index};
opacity:0;
animation:enter-${d}-animation 0.4s ease-in-out 0.3s;
animation-fill-mode:forwards;
animation-delay:${(index) / 10}s;
}
`
}
return {
name: 'createEnter',
rules: [
[/^enter-(.+)$/, ([,name], { rawSelector }) => {
if (!['y', 'x'].includes(name))
return
const selector = toEscapedSelector(rawSelector)
const addRawCss = []
for (let index = 1; index < maxOutput; index++)
addRawCss.push(createCss(index, name, selector))
return addRawCss.join('')
}, {
autocomplete: [
'enter-y',
'enter-x',
],
}],
],
preflights: [
{
getCSS: () => `
@keyframes enter-y-animation{to{opacity: 1;transform: translateY(0);}}
@keyframes enter-x-animation{to{opacity: 1;transform: translateX(0);}}
`,
},
],
}
}