办学质量监测教学评价系统
shenrongliang
2025-06-13 11d86cc6c26bb4f709e407acadf4805c2024e79f
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 };