mirror of
https://github.com/certd/certd.git
synced 2026-04-24 04:17:25 +08:00
🔱: [client] sync upgrade with 7 commits [trident-sync]
chore: Merge branch 'vben' # Conflicts: # package.json perf: antdv示例改成使用vben框架 chore: vben chore: vben chore: vben
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
import plugin from "tailwindcss/plugin.js";
|
||||
|
||||
const enterAnimationPlugin = plugin(({ addUtilities }) => {
|
||||
const maxChild = 5;
|
||||
const utilities = {};
|
||||
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 };
|
||||
Reference in New Issue
Block a user