如何在useEffect而不是在MouseOver事件中添加reactSpring

Question

我在带有React弹簧的onMouseOver上有一个动画。但是我想要页面加载上的动画(useEffect(。有人知道如何解决这个问题吗。

export function Hero({ image, text, button }) {
const heroRef = React.useRef(null)
const [transitionArrow, setTransitionArrow] = React.useState(false)
const animatedButton = useSpring({
transform: transitionArrow ? 'translate3d(0, 5px, 0)' : 'translate3d(0, 0px, 0)',
config: config.wobbly
})
return (
<div ref={heroRef} className={styles.component}>
<ContainerLg>
<div className={styles.content}>
<div className={styles.text}>
<h3>{text}</h3>
</div>
{ button && (<ButtonWhite>{button}</ButtonWhite>)}
</div>
</ContainerLg>
{ button &&
<animated.div
onMouseOver={(() => setTransitionArrow(true))}
onMouseLeave={(() => setTransitionArrow(false))}
style={animatedButton}
onClick={handleClick}
className={styles.arrow}
dangerouslySetInnerHTML={{ __html:scrollArow }} /> }
<div className={styles.image}>{image}</div>
</div>
)
function handleClick() {
window.scrollTo({ top: heroRef.current.offsetTop + heroRef.current.offsetHeight, behavior: 'smooth' })
}
}

Answer 1

这对我来说似乎很简单。你必须使用带有空依赖项的useEffect。这样它只会运行一次。

useEffect(() => {
setTransitionArrow(true);
},[])