Call/Run 每次用户导航到新页面时的动画

Question

我有一个导航（功能）组件，其中包含一个使用 GSAP 的简单动画。它在页面第一次加载时进行动画处理。我希望每次用户点击不同的页面时它都能动画（我正在使用 React Reach Router 进行页面导航）

我知道对于基于 class 的组件，我可以使用 componentDidMount 方法，但我如何使用功能组件实现这一点？而且我认为 window.onload 不会起作用，因为网站实际上并没有重新加载，而是重新路由。

Answer 1

在 Products 和 About 组件中包含 Nav。

Answer 2

我能够让它工作。我将所有内容都包含在 Nav 组件中。可能有更好的解决方案，但就目前而言，这是可行的：

  // set variable show initially to false
  const [show, setShow] = useState(false);

  // set show to true on click, then false again 
  const handleClick = () => {
    setShow(!show);
    setTimeout(function() {
      setShow(false);
    }, 500);
  };

  // if show is true, then run animation
  useEffect(() => {
    if (show) {
      TweenMax.from(navbar.current, 1, {
        y: -105
      });
    }
  }, [show]);

这是sandbox。

Call/Run 每次用户导航到新页面时的动画

Call/Run Animation Every Time user Navigates to new Page

reactjs

gsap

reach-router