ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add animation effects

Browse Source 
Adds subtle animation effects to improve user experience.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-22 06:43:22 +00:00
parent e0d4cf61c7
commit c1a64ed711
2 changed files with 57 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/AddTransactionButton.tsx
View File

@@ -138,15 +138,15 @@ const AddTransactionButton = () => {
<>
<div className="fixed bottom-24 right-6 z-20">
<button
className={`transition-all duration-300 bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex text-white animate-pulse-subtle ${
showText ? 'flex items-center gap-2 px-4 py-3 rounded-full' : 'p-4 rounded-full'
className={`transition-all duration-300 bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex text-white ${
showText ? 'flex items-center gap-2 px-4 py-3 rounded-full animate-bounce-gentle' : 'p-4 rounded-full animate-pulse-subtle'
}`}
onClick={() => setShowExpenseDialog(true)}
aria-label="지출 추가"
disabled={isSubmitting}
>
<PlusIcon size={showText ? 20 : 24} />
{showText && <span className="mr-1">지출 입력</span>}
<PlusIcon size={showText ? 20 : 24} className={showText ? "" : "animate-spin-slow"} />
{showText && <span className="mr-1 animate-fade-in">지출 입력</span>}
</button>
</div>