entry.ts 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import plugin from 'tailwindcss/plugin.js';
  2. const enterAnimationPlugin = plugin(({ addUtilities }) => {
  3. const maxChild = 5;
  4. const utilities: Record<string, any> = {};
  5. for (let i = 1; i <= maxChild; i++) {
  6. const baseDelay = 0.1;
  7. const delay = `${baseDelay * i}s`;
  8. utilities[`.enter-x:nth-child(${i})`] = {
  9. animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
  10. opacity: '0',
  11. transform: `translateX(50px)`,
  12. };
  13. utilities[`.enter-y:nth-child(${i})`] = {
  14. animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
  15. opacity: '0',
  16. transform: `translateY(50px)`,
  17. };
  18. utilities[`.-enter-x:nth-child(${i})`] = {
  19. animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
  20. opacity: '0',
  21. transform: `translateX(-50px)`,
  22. };
  23. utilities[`.-enter-y:nth-child(${i})`] = {
  24. animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
  25. opacity: '0',
  26. transform: `translateY(-50px)`,
  27. };
  28. }
  29. // 添加动画关键帧
  30. addUtilities(utilities);
  31. addUtilities({
  32. '@keyframes enter-x-animation': {
  33. to: {
  34. opacity: '1',
  35. transform: 'translateX(0)',
  36. },
  37. },
  38. '@keyframes enter-y-animation': {
  39. to: {
  40. opacity: '1',
  41. transform: 'translateY(0)',
  42. },
  43. },
  44. });
  45. });
  46. export { enterAnimationPlugin };