feat(directory): removed to_top button animation

This commit is contained in:
Haoyu Xu
2023-10-23 18:16:37 -04:00
parent 330a2787f8
commit 57efbb4045
2 changed files with 1 additions and 49 deletions

View File

@@ -40,47 +40,4 @@
.bar:nth-child(3), .bar:nth-child(4) {
transform: translateY(450%) rotateZ(90deg) scaleX(0.5);
}
&.clicked {
.bar:nth-child(1) {
animation: transform-1 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}
.bar:nth-child(2) {
animation: transform-2 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}
.bar:nth-child(3) {
animation: transform-3 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}
.bar:nth-child(4) {
animation: transform-4 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}
}
}
@keyframes transform-1 {
50% {
transform: translateY(450%) rotateZ(-90deg) scaleX(0.5);
}
}
@keyframes transform-2 {
50% {
transform: translateY(450%) rotateZ(90deg) scaleX(0.5);
}
}
@keyframes transform-3 {
50% {
transform: rotateZ(225deg) scaleX(0.5) translateX(-45%);
}
}
@keyframes transform-4 {
50% {
transform: rotateZ(-45deg) scaleX(0.5) translateX(-45%);
}
}

View File

@@ -8,7 +8,6 @@ import classes from './scss/totop_button.module.scss'
export default function ToTopButton(props) {
const [hidden, setHidden] = useState(true)
const [clicked, setClicked] = useState(false)
useEffect(() => {
const handleButton = () => {
@@ -42,15 +41,11 @@ export default function ToTopButton(props) {
t -= 2;
return c / 2 * (t * t * t + 2) + b;
}
setClicked(true)
setTimeout(() => {
setClicked(false)
}, duration)
}, [])
return (
<>
<section className={`${classes['totop-button']} ${clicked ? classes.clicked : ''} ${hidden ? '' : classes.show} ${props.className ? props.className : ''}`}
<section className={`${classes['totop-button']} ${hidden ? '' : classes.show} ${props.className ? props.className : ''}`}
onClick={() => { smoothScroll("#root") }}
>
<section className={classes.bar}></section>