问题标签 [react-animations]

我有一个由正方形划分的屏幕，需要通过用手指连续触摸平移手势来改变它们的颜色。

起初，我认为我可以通过平移处理程序获取我的手指位置并找到哪个元素位于该位置，这样我就可以改变它的颜色。但它并没有像我想象的那样工作。我被这个问题困住了，想知道你的意见。

所以，我最初在屏幕上的某个位置有一个组件（即视图）。我想在那里使用反应原生动画 API 制作一个轻微的动画。我想要的是将该视图的 X 位置从 0 移动到其原始位置。怎么做到呢？

我有一个反应应用程序，每当单击该表行的相应按钮时，我都试图使每个表行淡出。这个想法是，当单击该行上的删除按钮时，整行将淡出，其下方的其余行将向上移动（不创建任何空白空间），如果它是被删除的最后一行，它将只是淡出，桌子会变小。

目前我正在尝试使用 refs 和 CSS 来实现此功能，但是现在，例如，如果我单击第二行中的“删除”按钮 - 该行将立即被删除，没有任何动画，但同时最后一行的内容将根据我设置的 CSS 样式淡出，并且那里会留下一个空的表格行。之后，任何其他元素都将被删除，而没有任何淡出动画。

到目前为止，我已经完成了以下工作：

1) 一个创建动态表行的组件（任何必要的数据，包括 ref，都从具有业务逻辑的组件通过 useContext() 传递）：

2）在具有业务逻辑的主要组件中，我设置了参考：

3）这是一个处理单击删除按钮的函数：

4）简单的CSS动画：

您能否让我知道我在这里做错了什么以及需要修复什么才能使其按计划工作？

最好的问候，康斯坦丁

PS 我也将完整的代码附加到这篇文章中（以防万一），这里是这个项目的笔的链接。

更新：

1）我将以下类名添加到我的“tr”组件中：

2）在主要组件中，我添加了以下状态挂钩：

3）并将删除功能更改为以下内容（添加了一个额外的 useEffect 应用到这些钩子被更改）：

我尝试了不同的方法，包括使用 setTimeout/setInterval，在 handleDeletion 函数中没有单独的 useEffect 钩子等。但仍然无法获得所需的结果，它在不应用淡入淡出动画的情况下将其移除。

我想根据按钮单击来切换表中的某些列。单击按钮时，列应从右侧淡入，单击按钮时应从右侧淡出。我正在使用 react-animated-CSS，由于某种原因，我无法让动画正常工作。我还将该animate.css文件包含在我的 index.js 中。需要切换的列是最后 3 个。

这是我的代码：

索引.js

行.jsx

Stackblitz 链接

PS：我也愿意使用其他支持 Typescript 的动画库。谢谢

我正在尝试为向下滑动到实际高度的视图框设置动画。起初，如果 View 的最大高度（即查看所有内容所需的高度）小于 70，则不需要动画。如果最大高度大于 70，那么我将描述高度设置为 70，当单击视图时，它将向最大高度设置动画。这是我的目标。

出于某种原因，我无法使用 onLayout 函数获取所需的内容高度。这是我的代码：

如果我只是将动画设为静态而不运行 onLayout 函数，则动画效果很好。但是我需要得到文本框的高度，所以我知道我需要达到什么高度，因为我是从数据库中提取该文本。当我运行称为 getContentHeight() 的 onLayout 函数时，它要么在 0 和 maxHeight 之间来回跳跃，要么只停留在 0。感谢任何帮助！

我正在尝试为一堆卡片设置动画，因为顶部的卡片从甲板上滑落，但我无法让动画运行。

当甲板上的卡片数量发生变化时，我尝试运行动画

另外，我尝试在刷卡完成时调用的函数上运行它：

在随附的沙箱中，您会发现两种解决方案都已实现，但当然我当时尝试使用一种。

如果您向左或向右滑动顶部卡片，要查看问题跳转到沙盒，您会注意到下面的卡片会卡到顶部，而不是我想慢慢地将其动画到顶部。

https://codesandbox.io/s/react-native-deckj-z1nwb?file=/src/Deck.js

现在已经一个多星期了，我无法让它工作！，我正在尝试在反应页面组件之间进行转换，让它在每个页面上上下滚动。但是，在退出页面上，第二页需要显示时间更长，我不知道如何同步它，所以当第一页上升时，第二页也同时开始上升。

我正在使用AnimatePresence和exitBeforeEnter包装应用程序组件。感谢对正确方向的任何帮助。

以下是我对每个组件的变体

因此，我只是尝试通过 TouchableOpacity 组件中的 onLaypout 道具访问 x 坐标以做出本机反应，但我在模拟器中遇到错误说

这是我第一次涉足反应动画方面，但不知道为什么会失败。网上似乎也没有太多关于它的信息，所以我开始认为它已被弃用。

克里斯，任何帮助都会很棒。

我想在我的打字稿项目中使用 react-awesome-reveal，但动画似乎不起作用。但是，当我使用 react-reveal 时它可以工作。请就我所缺少的提出建议。

Stackblitz 代码：链接

任何帮助表示赞赏。

我使用 Animatable 插件将一些动画添加到我的应用程序组件中。

但我发现这animation="tada"使得组件不断增长，如下所示。
除了Flippers动画，没有一个动画停止增长。

如何解决这个问题？