54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
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 };
|