515fceeb
 “wangming”
框架初始化
|
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
|
import plugin from 'tailwindcss/plugin.js';
const enterAnimationPlugin = plugin(({ addUtilities }) => {
const maxChild = 5;
const utilities: Record<string, any> = {};
for (let i = 1; i <= maxChild; i++) {
const baseDelay = 0.1;
const delay = `${baseDelay * i}s`;
utilities[`.enter-x:nth-child(${i})`] = {
animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
opacity: '0',
transform: `translateX(50px)`,
};
utilities[`.enter-y:nth-child(${i})`] = {
animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
opacity: '0',
transform: `translateY(50px)`,
};
utilities[`.-enter-x:nth-child(${i})`] = {
animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
opacity: '0',
transform: `translateX(-50px)`,
};
utilities[`.-enter-y:nth-child(${i})`] = {
animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
opacity: '0',
transform: `translateY(-50px)`,
};
}
// 添加动画关键帧
addUtilities(utilities);
addUtilities({
'@keyframes enter-x-animation': {
to: {
opacity: '1',
transform: 'translateX(0)',
},
},
'@keyframes enter-y-animation': {
to: {
opacity: '1',
transform: 'translateY(0)',
},
},
});
});
export { enterAnimationPlugin };
|
