【问题标题】:WordPress / Elementor to achieve page transition effect like React's Framer's MotionWordPress/Elementor 实现类似 React 的 Framer's Motion 的页面过渡效果
【发布时间】:2021-08-07 01:38:04
【问题描述】:

最近发现一个真正吸引我的话题,就是React Route和Framer Motion。

我主要用 WordPress 和 Elementor 建站,请问有没有什么方法可以达到类似 React 的 Framer 动作的效果?例如,单击一个对象并平滑过渡到另一个页面。

例如:https://akashisakebrewery.com/

我注意到这个网站是用 WordPress 构建的,但我相信有很多自定义编码,只是想知道最好的方法是什么?

本来想用简单的 CSS 动画,搭配 jQuery onclick 结合页面加载 CSS 动画,但不认为这是正确的做法,同时对于动态列表,也不可能用我的尝试来实现像 Framer Motion 这样的东西。

非常感谢您分享任何想法和经验!

【问题讨论】:

    标签: jquery css reactjs wordpress framer-motion


    【解决方案1】:

    我不会用“什么是最好的方法”来表达这个问题,因为有很多好方法取决于您所做的权衡。

    我只是互联网上的一些人,但是

    1. 如果您只是想做类似该网站的事情,则不需要 framer-motion 或任何与 SPA 相关的东西,因为它们的过渡不会跨路线。这一切都在他们的/ 路线上,就像你提到的那样可行。
    2. 如果您确实想动态地跨路由转换,我认为您需要使用 SPA(单页应用程序)。

    SPA 和传统 WordPress(或相关)设置之间的主要区别在于,SPA 不会为每条路线重新下载新的捆绑包,并且在您的情况下,您可以灵活地控制路线更改的样子。我会自行研究 SPA 与 MPA 以获得更多详细信息!

    如果您决定选择第 2 点,尽管这种飞跃需要付出很多代价,因此您将不得不决定过渡对您来说是否值得。

    如果您想查看代码的另一个示例,这里是我为另一个问题制作的成帧器运动页面转换的链接:https://codesandbox.io/s/framer-motion-animate-react-router-transition-kczeg

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2023-04-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-03-01
      • 2021-06-16
      • 2011-02-08
      • 1970-01-01
      相关资源
      最近更新 更多