问题标签 [react-spring]

我尝试为数组中的新条目设置动画，因为它们react-spring在第一次渲染时工作得很好，但在更新时没有动画

这是一个代码沙箱，我在其中以一定间隔重现了该问题：https ://codesandbox.io/s/01672okvpl

我尝试了相同的结果Spring。Transition

我正在尝试react-spring尝试在使用组件安装/卸载时在<Transition>组件列表上应用动画。动画在挂载时按预期发生，但在卸载时根本不发生——被移除的组件似乎立即卸载而没有动画。

我怀疑我误解了keys工作原理，因为它似乎是我的代码与示例中唯一不同的地方——我使用id每个对象的属性一个数组。key我的假设是它与用于组件列表的React 内置相同，只是一次通过。我尝试使用Transition'sitems参数传递数据数组并将其设置key为函数，但它只是以不同的方式发生故障。

我在这里设置了一个简单的演示，我在其中创建了一个列表并设置了一个超时，以在 3 秒后删除第一个项目——代码如下：

我在这里的 CodeSandbox 上运行它：https ://codesandbox.io/s/r5n8v3x85q

我错过了什么吗？

一个星期以来我一直在反对这个。我正在使用react-spring在页面之间创建过渡动画。这些页面由在 React 组件的渲染中调用的 switch case 定义。

我用奇怪的行为做了一个简单的沙箱：

https://codesandbox.io/s/50y5kkljz4

这段代码大部分是对我更复杂的堆栈的模拟。寻找任何建议和我所缺少的。

这是来自 react-spring 的错误吗？

我在做一些在 React 中不能做的事情吗？

甚至可以在（切换）案例之间制作动画吗？

要尝试的事情：

1. [第 71 行] 注释掉转换组件中的键。看看结果如何。
2. [第 74 行] 注释掉 Transition 组件中的 leave 属性。见结果。

react-spring 的完整 API 参考

提前致谢！

我有以下React 应用程序，我在其中使用 react-spring 在路线之间制作动画，并根据当前滚动位置为不同元素制作动画。

当我overflow: scroll在Home组件上使用时，我无法从我的handleScroll方法中返回任何内容（它只返回 0）：

有没有解决的办法？

不幸的是，我需要用它overflow: scroll来解决这个问题。

任何帮助深表感谢！

我试图在我的组件中使用与此示例类似的可滑动按钮，我能够使其与 React 一起使用，但 TypeScript 给我带来了问题。请看下面的编译错误：

[at-loader] ./src/components/Person.tsx:19:62 TS2322 中的错误：类型 '(name: string) => boolean | undefined' 不可分配给类型 'boolean | 字符串[] | （（键：字符串）=> 布尔值）| (false & ((name: string) => boolean | undefined)) | (true & ((name: string) => boolean | undefined)) | (string[] & ((name: string) => boolean | undefined)) | (((key: string) => boolean) & ((name: string) => boolean | undefined)) | 不明确的'。输入 '(name: string) => boolean | undefined' 不能分配给类型 '(key: string) => boolean'。输入'布尔| undefined' 不能分配给类型 'boolean'。类型“未定义”不可分配给类型“布尔”。

[at-loader] ./src/components/Person.tsx:21:59 TS2532 中的错误：对象可能是“未定义”。

[at-loader] 中的错误 ./src/components/Person.tsx:23:33 TS2345: 类型参数 'number | undefined' 不能分配给“number”类型的参数。类型“未定义”不可分配给类型“数字”。

[at-loader] ./src/components/Person.tsx:23:49 TS2532 中的错误：对象可能是“未定义”。ℹ｢wdm｣：编译失败。

这与我的 tsconfig 设置有关吗？过去 10 个小时，我一直在尝试使用 Typescript 和我自己的配置文件通过手势示例运行 react-spring。我将不胜感激。

谢谢。

我想将此库用于本机反应，但不知道如何。react-native 的文档链接已损坏。我可以将库用于 react-native 吗？

I am currently getting to grips with the react-spring animation library.

In some of the CodeSandbox demos (e.g. https://codesandbox.io/embed/j150ykxrv) in the documentation, something is imported called "animated":

and then used like so:

In other examples this isn't used:

I can't find any mention in the documentation of what this does or why it is used, as it seems you can animate by just passing animated style props into a component.

Are the uses in the documentation part of a legacy version?

我正在使用 react-spring 尝试在加载 AJAX 内容时对其进行动画处理。

我有一个容器组件，有时我想从 0 动画到“自动”，有时我想根据传入的道具动画到 100%。

我设置了一个 const，然后将其传递到 Transition 组件中的 computedHeight 属性。然后我使用它在已安装的子组件的样式属性中设置高度属性。

问题是这会导致最大调用堆栈超出错误，因为我认为 react-spring 不能理解“100%”字符串值，只能理解“自动”。

有解决办法吗？

我正在使用 react-spring 尝试使用 Transition 组件创建一个动画，当组件中的道具发生变化时，该组件会淡出然后重新加入。

通过查看文档，我了解到这可以通过使用 Transition 组件中的“update”道具来实现。

然而，这似乎只是设置了一个永远不会改变的值（当道具改变时，不透明度设置为 0.5）。我不明白如何使用它来淡出 Slave 组件并在道具更改时将其淡出。

过渡组件：

组件在返回更改/道具更改时进行动画处理：

SCSS

场景一：

1. 不同的 SlaveComponent 道具作为道具传递给从属组件。
2. 预计这会触发更新、淡出和淡入。

场景二：

1. 从站的返回条件变化
2. 预计这会淡出第一个返回组件并淡入另一个。

我正在尝试在使用 React-spring 安装/卸载组件时创建动画：

但这只是行不通，我得到了一个错误children is not a function。我做错了什么，如何使用 react-spring 包装器在组件安装/卸载上创建动画？