问题标签 [react-spring]

当我按下按钮时，我正在尝试从/到另一个组件的动画。我正在使用useTransition来自react-spring. 这样做时，动画会起作用，但是，当动画进行时，我的身高会发生变化。

我尝试positions在animated.div(from react-spring) 上放置不同的内容并在其上设置固定高度。但似乎没有任何效果。

动画有效，但是高度发生了变化。我制作了一个小代码框，在这里演示它：https ://codesandbox.io/s/dry-thunder-ydkg8

但在我的实际代码中，我的身高是这样的：https ://youtu.be/7cGLOK7fCco

我正在使用 react-spring 为基于 @reach/dialog 的 Modal 设置动画。模态可以有任何孩子。在孩子们中，我正在根据一些道具获取一些数据。

问题是在打开模式时进行了两次获取调用。我认为这可能与我如何管理状态有关，这会导致重新渲染。

我试过在模态框内记忆孩子，但没有奏效，所以我认为问题出在模态框组件之外。

这是接近我的代码的东西以及它是如何工作的 https://codesandbox.io/s/loving-liskov-1xouh

编辑：我已经知道，如果我删除 react-spring 动画，则不会发生双重渲染，但我想尝试保持动画完整。

您认为您可以帮助我确定错误在哪里吗？（也非常感谢一些关于使用钩子的良好实践的提示）。

我想要实现“盲目效果”，其中单击按钮将导致覆盖 div 动画化，因此只有一小部分显示在屏幕顶部，并显示下面的 div。

我正在使用 gatsby，带有反应弹簧和样式组件。我已将“盲”设置为一个组件，如下所示：-

但是动画不适用于变换：翻译。如果我用背景颜色上的动画替换它......

...它工作正常，所以一切都在使用状态切换。

此外，如果我在开发人员工具中修改 transform:translate 它也可以工作 - 那么我做错了什么？

非常感谢

我有这个路由器动画在页面加载时工作，但是当我使用导航栏导航时，它会更改网址，但页面不会更改或需要很长时间才能更改。

这就是我的 NavLink 的结构

我正在尝试使用 React-Spring 库中的 'useTransition' 和 'animated' 并且遇到一个问题，即它只在第一次动画时，也没有激活离开。

通过深入研究，我认为这与密钥没有更新这一事实有关，我认为这就是使新动画能够渲染的原因，但我不知道如何获取密钥以更新而不是刷新这页纸。

我希望每次单击申请人时都会触发动画，但它仅在第一次时才动画。之后他们就正常出现了。谁能告诉我我做错了什么。

在我的反应应用程序中，我有组件，我在其中使用Transitionfrom react-spring。

但是当我更新this.state.items这并没有重复动画。当我更新items状态时，我只更改数组中的元素顺序。

使用一个简单的教程尝试 react-spring。但是，它对我不起作用。这是我的代码：

这是错误

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Box.

我在 gatsby 的默认启动器中使用 react-spring，我只是像这样导入我的 Box 组件：

我决定在我的 React js 应用程序中引入 TypeScript。

使用 react-spring 进行坐标插值的组件存在问题。

在 TypeScript 之前，我的组件是这样的：

一切正常。

打字稿后：

它不起作用，我没有编译错误，根本没有发生翻译。“样式”不会注入到元素中。

在过去的几天里，我一直在为 React 使用不同的动画库，试图找到在视图（而不是路由）之间转换的解决方案，其中视图将是包装其他组件的组件等等。

到目前为止我试过：
react-transtition-group
react-animations
react-spring

仍然需要尝试react-motion'Transition...

...还有更多，但所有这些，做我需要的，除了一件事......当应用过渡/样式的每个状态时，子组件总是更新，触发重新渲染（顺便说一句，这是有道理的），除非孩子shouldComponentUpdate()返回 false，或者被包裹在 PureComponent 中，这两者都不是解决方案，因为您可能（肯定）想要在过渡结束。

那里的所有示例都服务于它们的目的，但它们都使用功能组件或简单的字符串，用于演示目的，任何人都不应该关心是否重新渲染，而是一个简单的修改，每次都会记录组件被渲染，将显示它们在过渡期间多次渲染。

奇怪的是，似乎没有人关心或不知道。我发现关于这个问题的问题或问题很少，尽管它非常真实，并且库对此的记录非常少。

请分享您的解决方案以避免此问题。

我有一个使用 React-Spring 转换呈现的标签列表。这个想法是您可以添加项目，如果您有超过 5 个项目，则会出现一个“显示更多”按钮。按下此按钮可切换您是显示所有标签还是仅显示前五个标签。

问题是当我从“显示更多”转到“显示更少”时。我注意到在我的项目被隐藏之前，除了第一个项目之外，所有项目都移动到列表的开头，产生了一种奇怪的效果，你可以看到第一个标签改变了它们的文本并消失，然后离开最后一个标签（第一个标签' 文本）。

我附上了一个重现此问题的小沙箱。它有 10 个项目，您可以打开和关闭它，但它重现了这个奇怪的错误：https ://codesandbox.io/s/thirsty-mountain-ut3r9

关于如何解决它的任何提示？