问题标签 [page-transition]

我想在颤动的两个页面的背景颜色之间制作动画。我说的是页面转换，但不是转换整个页面，我只想更改新页面的背景颜色（从前一页的 bg 颜色到新颜色），而其余的前景内容淡入（或任何其他类型的过渡）。

如果您需要更多说明，我想要一些类似Hero过渡的东西，但要使用页面的背景颜色。

背景颜色不必只是某个容器的颜色属性。

编辑：为了轻松回答，假设我的页面可以通过为其构造函数指定颜色来调用。所以页面如下所示，

我的方法应该是什么？我应该创建类似自定义过渡的东西吗？在这种情况下，我怎样才能为背景颜色设置动画？

我正在使用 react-springs 在 NextJS Web 应用程序中从一个页面转换到另一个页面。

要重现错误：

1. 打开codesandbox链接：https ://codesandbox.io/s/nextjs-page-transition-react-spring-ggx7n?file=/pages/_app.js
2. 导航到实时 Web 应用程序的底部
3. 点击联系人链接

您会注意到索引页面滚动到顶部，然后转换到联系页面。我放慢了过渡的速度来揭示它。

在转换到下一个之前，如何防止它滚动到页面顶部？

我正在计划在 Wordpress 中使用导航箭头（按钮）在页面屏幕的顶部、右侧、底部和左侧创建一个网页。通过单击其中一个按钮，您可以进入下一页 - 但页面转换取决于您单击的按钮。

简而言之： 用户点击“右箭头”=下一页从右侧滑入//用户点击“向下箭头”=下一页从底部滑入...

由于页面可以出现在所有方向，我单击的按钮应该指示页面必须向哪个方向滑动。我怎样才能通过css实现呢？

还是反过来起作用？当前页面必须在点击时向右、向左、向上、向下滑动？

我发现了这样的东西：https ://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ 但在这种情况下，所有内容都在一个 html 文件中。那不是真正的页面转换...谢谢

向上、向下和横向寻找解决此问题的方法。

我的目标是将延迟加载分配给我的 React 网站中的几乎所有组件。但是，当这些组件进入和退出时，这些组件会利用成帧器运动页面转换。页面转换和延迟加载的组合导致组件在作为路由单击时不再正确加载。

我从这篇文章 ( https://github.com/reactjs/react-transition-group/issues/580 )中找到了灵感，并尝试引入“react-lazy-with-preload”包 ( https://github.com /ianschmitz/react-lazy-with-preload），但是我没有成功让它工作。

有人知道这个问题的解决方案吗？我肯定不是唯一一个尝试对 React 网站进行数据拆分的人，该网站使用具有 framer-motion 页面转换的组件。

App.js 代码如下：

我很容易遇到我无法解决的问题。我想在 Flutter Web 中创建简单的淡入/淡出页面转换，但由于某种原因，转换只发生在 FadeIn 中。上一页不会淡出。这是一个代码：

我已经搜索了几个小时，但无法解决问题。如果你们中的任何人有任何想法，请不要犹豫回答！提前致谢！

如果要将 framer-motion 添加到功能组件，则将 <motion.div ...> 添加到 render 方法。简单的。但在非功能组件的情况下这是不可能的。假设我想在 Login 组件和 anotherPage 功能组件之间添加一个页面转换效果，那是怎么做的呢？

这里有一些代码供参考：

在这里，我复制了一个简单的片段，其中包含使用react-spring.

单击浏览器后退按钮时，有没有办法恢复上一页滚动位置？

周围有很多相关的QA，但是我在使用动画库时找不到任何解决方案

知道如何实现吗？

我在我的网站上使用页面转换。但是，我目前的做法并不是最有效的。

当用户单击链接时，会触发转换，然后我用window.location.

我想做的是启动下一页的加载，然后触发转换。加载下一页后，我应该在我们离开页面之前检查 outTransition 是否已完成的条件。

总而言之，我不想一个接一个地执行两个步骤（转换和加载下一页），我想同时执行此操作。

我当前的代码：

有可能这样做吗？setTimeout()当我调用该window.location方法时，我试图删除该函数。这样，加载与转换同时开始。然而，页面随时更改，即使转换未结束。

有没有办法做我想做的事？或类似的东西。

正如标题所说，我想在 React Js 中使用成帧器动作进行页面转换，例如https://allhero.co.jp

我试过：

看起来有点像，但我不知道这是否是正确的做法，而且看起来并不多。重要的是我想让它可重复使用。我喜欢加载页面时黑色消失的功能

嗨，我有一个这样的组件：

我想像这样使用成帧器运动：

我想这样做的原因是我不认为将很多 div 作为包装器是一个好主意。我可以在“Comp”组件中使用motion.div，但我的一些应用程序组件是不需要在我的整个应用程序中为它们设置动画的。我只想要一个将动画添加到组件中的第一个元素的解决方案。

我也搜索并找到了一个解决方案“motion(Comp)”，但它不起作用。