我在使用 Reach-Router Not React-Router、 GSAP 和 React-Transition-Group 组合的页面过渡动画上遇到问题。
我做了研究并找到了使用 Reach-Router 和 React-Transition-Group 的页面转换动画示例
https://reach.tech/router/example/animation
这个例子使用 CSS 动画,但我想用 GSAP 动画它,它使用的是纯 JavaScript 而不是 CSS。所以,这意味着我不需要使用TransitionGroup
and CSSTransition
。
后来我发现了另一个关于 GSAP 页面转换动画的例子。
https://stackblitz.com/edit/gsap-react-route-animation
但它使用反应路由器而不是到达路由器。由于 react-router 和reach-router 看起来几乎彼此接近。我决定从 GSAP、RTG 和 React-Router 开始我自己的实验,这样我可以更好地理解它是如何工作的……这是我的沙箱。
https://codesandbox.io/s/react-router-gsap-pgu24
动画成功了!然后,我做了另一个实验,得到了代码的精确副本并转换了一些区域以使其与Reach-Router兼容。这是我的沙盒。
https://codesandbox.io/s/reach-router-gsap-h5rny?fontsize=14
除了动画,一切都有效。我一直在努力寻找问题所在,但我在这里不明白。我错过了什么吗?请问需要帮助吗?