xufuhan/asset-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nav新增动画，修复潜在的性能和bug，优化动画流畅度

Browse Source
This commit is contained in:
xufuhan
2026-01-29 09:48:05 +08:00
parent 0a1bd07492
commit 2377e2dda2
6 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/HowItWorksSection.tsx
View File

@@ -270,8 +270,8 @@ export default function HowItWorksSection() {
boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
transformOrigin: '0 0',
transform: animate && activeStep === 1
? 'rotate(6.535deg) scale(1, 1) translateY(0)'
: 'rotate(6.535deg) scale(1, 1) translateY(3rem)',
? 'rotate(6.535deg) scale(1, 1) translateX(0)'
: 'rotate(6.535deg) scale(1, 1) translateX(3rem)',
transitionDelay: activeStep === 1 ? '200ms' : '0ms',
pointerEvents: activeStep === 1 ? 'auto' : 'none'
}}
@@ -305,8 +305,8 @@ export default function HowItWorksSection() {
}`}
style={{
transform: animate && activeStep === 1
? 'rotate(-3deg) translateY(0)'
: 'rotate(-3deg) translateY(3rem)',
? 'rotate(-3deg) translateX(0)'
: 'rotate(-3deg) translateX(3rem)',
transformOrigin: 'center center',
transitionDelay: activeStep === 1 ? '200ms' : '0ms',
pointerEvents: activeStep === 1 ? 'auto' : 'none'
@@ -420,8 +420,8 @@ export default function HowItWorksSection() {
style={{
boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
transform: animate && activeStep === 2
? 'rotate(3deg) translateY(0)'
: 'rotate(3deg) translateY(3rem)',
? 'rotate(3deg) translateX(0)'
: 'rotate(3deg) translateX(3rem)',
transformOrigin: '0 0',
transitionDelay: activeStep === 2 ? '200ms' : '0ms',
pointerEvents: activeStep === 2 ? 'auto' : 'none'
@@ -493,8 +493,8 @@ export default function HowItWorksSection() {
style={{
boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
transform: animate && activeStep === 3
? 'rotate(3deg) translateY(0)'
: 'rotate(3deg) translateY(3rem)',
? 'rotate(3deg) translateX(0)'
: 'rotate(3deg) translateX(3rem)',
transformOrigin: '0 0',
transitionDelay: activeStep === 3 ? '200ms' : '0ms',
overflow: 'hidden',
@@ -545,7 +545,7 @@ export default function HowItWorksSection() {
+10% APY
</span>
<div
className="bg-[#000000] rounded-lg px-4 py-2"
className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
>
<span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -578,7 +578,7 @@ export default function HowItWorksSection() {
+10% APY
</span>
<div
className="bg-[#000000] rounded-lg px-4 py-2"
className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
>
<span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -611,7 +611,7 @@ export default function HowItWorksSection() {
+10% APY
</span>
<div
className="bg-[#000000] rounded-lg px-4 py-2"
className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
>
<span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -644,7 +644,7 @@ export default function HowItWorksSection() {
Get USDC
</span>
<div
className="bg-[#000000] rounded-lg px-4 py-2"
className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
>
<span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -677,7 +677,7 @@ export default function HowItWorksSection() {
10% APY
</span>
<div
className="bg-[#000000] rounded-lg px-4 py-2"
className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
>
<span className="text-white font-inter text-[12px] font-bold leading-4">