0

我在使用 Reach-Router Not React-Router、 GSAP 和 React-Transition-Group 组合的页面过渡动画上遇到问题。

我做了研究并找到了使用 Reach-Router 和 React-Transition-Group 的页面转换动画示例

https://reach.tech/router/example/animation

这个例子使用 CSS 动画,但我想用 GSAP 动画它,它使用的是纯 JavaScript 而不是 CSS。所以,这意味着我不需要使用TransitionGroupand 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

除了动画,一切都有效。我一直在努力寻找问题所在,但我在这里不明白。我错过了什么吗?请问需要帮助吗?

4

0 回答 0