jquery - WordPress/Elementor 实现类似 React 的 Framer's Motion 的页面过渡效果

标签 jquery css reactjs wordpress framer-motion

最近发现一个很吸引我的话题,那就是React Route和Framer Motion。
我主要用WordPress和Elementor建网站,我很好奇有没有什么方法可以达到类似React的Framer motion的效果?例如,单击一个对象并具有到另一页面的平滑过渡动画。
例如:https://akashisakebrewery.com/
我注意到这个网站是用 WordPress 构建的,但我相信很多自定义编码,只是想知道最好的方法是什么?
我在想使用简单的CSS动画并与jQuery onclick结合与页面加载CSS动画结合使用,但不要认为这是正确的方法,同时对于动态列表,也无法实现某些东西就像我尝试的 Framer Motion。
任何想法和经验分享将不胜感激!

最佳答案

我不会用“什么是最好的方法”来表达这个问题,因为有很多好的方法取决于你正在做的权衡。
我只是互联网上的某个人,但是

  • 如果你只是想做类似那个网站的事情,你不需要 framer-motion 或任何与 SPA 相关的东西,因为它们的过渡不是跨路线的。一切尽在他们 /路线和你提到的类似的东西会起作用。
  • 如果您确实想动态地跨路由转换,我认为您需要使用 SPA(单页应用程序)。

  • SPA 和传统 WordPress(或相关)设置之间的主要区别在于,SPA 不会为每条路由重新下载新包,并且在您的情况下,您可以灵活地控制路由更改的样子。我会自己研究 SPA 与 MPA 以获取更多详细信息!
    如果您决定使用#2,尽管这种飞跃需要付出很多代价,因此您必须决定这些转换对您来说是否值得。
    如果您想查看代码外观的另一个示例,这是我为另一个问题制作的成帧器运动页面转换的链接:https://codesandbox.io/s/framer-motion-animate-react-router-transition-kczeg

    关于jquery - WordPress/Elementor 实现类似 React 的 Framer's Motion 的页面过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67575662/

    相关文章:

    css - 将超棒的字体图标居中对齐

    javascript - React JSX 组件。无法通过流量

    javascript - 在一组比赛中调用一个事件

    javascript - 使用 jQuery 更改事件的 Bootstrap 3 选项卡

    javascript - 如何查找用户在 beforeunload 警报后是否选择了 “Stay” 或 “Leave” 按钮?

    css - 使用初始值时,过渡属性不起作用

    javascript - jQuery 下拉菜单 - 如何隐藏正文点击菜单

    html - 如何将下拉菜单对齐到页面的左边框?

    reactjs - 谷歌地图 API : why does my map state become null?

    javascript - 访问 Meteor/React 应用程序中的环境变量