поправила анимацию при масштабировании
This commit is contained in:
parent
9937c64224
commit
8b8f59c55d
@ -101,6 +101,3 @@ export default CourseComplete
|
||||
|
||||
|
||||
|
||||
// <svg xmlns="http://www.w3.org/2000/svg" width="292" height="221" viewBox="0 0 292 221" fill="none">
|
||||
// <path d="M26 78.0571C43.5001 101.057 67.9999 122.5 111 129C154 135.5 164 119.557 202.5 138.557C241 157.557 248.5 188.057 252 203.057C255.5 218.057 270 221.057 277.5 220.057C285 219.057 289.5 212.557 291 206.057C292.5 199.557 287.5 159.557 246.5 121.557C205.5 83.5571 174 95.0575 114.5 89.5571C55.0001 84.0568 39.5 24.0576 34 9.55715C28.5001 -4.94333 -1.70972e-05 -2.94326 0 15.5571C1.70972e-05 34.0576 8.49988 55.0571 26 78.0571Z" fill="#F3945B" />
|
||||
// </svg>
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import type React from "react"
|
||||
import { useEffect, useState } from "react"
|
||||
// import { useIonRouter } from '@ionic/react';
|
||||
import { useIonRouter } from '@ionic/react';
|
||||
|
||||
const CourseComplete: React.FC = () => {
|
||||
|
||||
@ -25,15 +25,15 @@ const CourseComplete: React.FC = () => {
|
||||
|
||||
|
||||
|
||||
// const router = useIonRouter()
|
||||
const router = useIonRouter()
|
||||
|
||||
// useEffect(() => {
|
||||
// const timer = setTimeout(() => {
|
||||
// router.push("/home", "forward")
|
||||
// }, 3500) // Задержка 3 секунды
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
router.push("/home", "forward")
|
||||
}, 3500) // Задержка 3 секунды
|
||||
|
||||
// return () => clearTimeout(timer)
|
||||
// }, [router])
|
||||
return () => clearTimeout(timer)
|
||||
}, [router])
|
||||
|
||||
|
||||
return (
|
||||
@ -45,16 +45,20 @@ const CourseComplete: React.FC = () => {
|
||||
|
||||
|
||||
<div className="min-h-screen p-4 relative overflow-hidden max-w-2xl mx-auto">
|
||||
<div className="absolute inset-0 flex items-start justify-center pt-30">
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="absolute inset-0 flex items-start justify-center pt-30 w-[400px] h-[1100px]">
|
||||
{/* тело */}
|
||||
<div className={`absolute left-[37%] transform duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[24%]" : "opacity-0 scale-0 top-[10%]"} `}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="109" height="160" viewBox="0 0 109 166" fill="none">
|
||||
<rect width="109" height="166" rx="40" fill="#F3945B" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="158" viewBox="0 0 100 158" fill="none">
|
||||
<rect width="100" height="158" rx="60" fill="#F3945B" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* руки */}
|
||||
<div className={`absolute left-[15%] transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[14%]" : "opacity-0 scale-0 top-[7%]"} ${animationPhase >= 3 ? "opacity-100 rotate-20" : "opacity-100 rotate-0"}`}
|
||||
<div className={`absolute left-[15%] transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[16%]" : "opacity-0 scale-0 top-[20%]"} ${animationPhase >= 3 ? "opacity-100 rotate-20" : "opacity-100 rotate-0"}`}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="292" height="221" viewBox="0 0 292 221" fill="none">
|
||||
<path d="M26 78.0571C43.5001 101.057 67.9999 122.5 111 129C154 135.5 164 119.557 202.5 138.557C241 157.557 248.5 188.057 252 203.057C255.5 218.057 270 221.057 277.5 220.057C285 219.057 289.5 212.557 291 206.057C292.5 199.557 287.5 159.557 246.5 121.557C205.5 83.5571 174 95.0575 114.5 89.5571C55.0001 84.0568 39.5 24.0576 34 9.55715C28.5001 -4.94333 -1.70972e-05 -2.94326 0 15.5571C1.70972e-05 34.0576 8.49988 55.0571 26 78.0571Z" fill="#F3945B" />
|
||||
@ -62,7 +66,7 @@ const CourseComplete: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* нога 1 */}
|
||||
<div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[34%] left-[37%]" : "opacity-0 scale-0 top-[15%] left-[47%]"} ${animationPhase >= 3 ? "top-[0%] right-[47%] " : "top-[15%] right-[47%] "}`}>
|
||||
<div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[30%] left-[37%]" : "opacity-0 scale-0 top-[15%] left-[47%]"} ${animationPhase >= 3 ? "top-[0%] right-[47%] " : "top-[15%] right-[47%] "}`}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="37" height="129" viewBox="0 0 37 129" fill="none">
|
||||
<rect width="37" height="129" rx="18.5" fill="#F3945B" />
|
||||
</svg>
|
||||
@ -76,14 +80,14 @@ const CourseComplete: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* нога 2 */}
|
||||
<div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[34%] right-[37%] " : "opacity-0 scale-0 top-[15%] right-[47%] "} `}>
|
||||
<div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[30%] right-[38%] " : "opacity-0 scale-0 top-[15%] right-[47%] "} `}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="37" height="178" viewBox="0 0 37 178" fill="none">
|
||||
<rect width="37" height="178" rx="18.5" fill="#F3945B" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* голова */}
|
||||
<div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[14%] left-[41%] " : "opacity-0 scale-0 top-[20%] right-[40%] "} `}>
|
||||
<div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[16%] left-[41%] " : "opacity-0 scale-0 top-[20%] right-[40%] "} `}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 75 75" fill="none">
|
||||
<circle cx={37.5} cy={37.5} r={37.5} fill="#F3945B" />
|
||||
</svg>
|
||||
@ -92,7 +96,7 @@ const CourseComplete: React.FC = () => {
|
||||
|
||||
|
||||
{/* мяч */}
|
||||
<div className={`z-50 absolute transition-all duration-600 delay-100 ${animationPhase >= 2 ? "opacity-100 scale-100 top-[14%] left-[22%] " : "opacity-0 scale-0 -top-[20%] right-[40%] "} ${animationPhase >= 3 ? "scale-[90%]" : "scale-100"} {/* ${animationPhase >= 4 ? "scale-[3000%]" : "scale-100"} */}
|
||||
<div className={`z-50 absolute transition-all duration-600 delay-100 ${animationPhase >= 2 ? "opacity-100 scale-100 top-[14%] left-[22%] " : "opacity-0 scale-0 -top-[20%] right-[40%] "} ${animationPhase >= 3 ? "scale-[90%]" : "scale-100"} ${animationPhase >= 4 ? "scale-[3000%]" : "scale-100"}
|
||||
|
||||
` }
|
||||
>
|
||||
@ -137,3 +141,8 @@ const CourseComplete: React.FC = () => {
|
||||
}
|
||||
|
||||
export default CourseComplete
|
||||
|
||||
|
||||
// <svg xmlns="http://www.w3.org/2000/svg" width="292" height="221" viewBox="0 0 292 221" fill="none">
|
||||
// <path d="M26 78.0571C43.5001 101.057 67.9999 122.5 111 129C154 135.5 164 119.557 202.5 138.557C241 157.557 248.5 188.057 252 203.057C255.5 218.057 270 221.057 277.5 220.057C285 219.057 289.5 212.557 291 206.057C292.5 199.557 287.5 159.557 246.5 121.557C205.5 83.5571 174 95.0575 114.5 89.5571C55.0001 84.0568 39.5 24.0576 34 9.55715C28.5001 -4.94333 -1.70972e-05 -2.94326 0 15.5571C1.70972e-05 34.0576 8.49988 55.0571 26 78.0571Z" fill="#F3945B" />
|
||||
// </svg>
|
||||
Loading…
x
Reference in New Issue
Block a user