如何在 useEffect 而不是 onMouseOver 事件上添加 reactSpring？答案

【问题标题】：How to add reactSpring on useEffect instead of onMouseOver event?如何在 useEffect 而不是 onMouseOver 事件上添加 reactSpring？
【发布时间】：2020-07-17 19:23:36
【问题描述】：

我在 onMouseOver 上有一个带有 React-spring 的动画。但我想要页面加载上的动画（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' })
  }
}

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

对我来说这似乎很简单。您必须将 useEffect 与空依赖项一起使用。这样它只会运行一次。

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

【讨论】：