feat(directory): removed to_top button animation
This commit is contained in:
@@ -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%);
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user