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

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

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

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

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

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

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

我正在处理具有可见性传感器的页面，因此每当我滚动到该部分时，动画就会开始。但是，我只需要它只可见一次。

我目前正在使用钩子和功能组件。我一直在寻找能够在查看后将可见性设置为 true 的方法。

输出应该已经可见，而不是仅在每次滚动时才可见。

使用成帧器动作，当悬停在作为按钮的父元素上时，我想动画我的图标组件旋转 90 度。

我看到了变体的使用，但不确定如何真正将它们与whileHover.

任何帮助将不胜感激，因为这是一个新事物。

我有一个react-native-collapsible视图，它渲染了一些组件以及另一个Collapsible视图。

我的问题是，在折叠Collapsible组件视图后，如果我添加一些增加视图高度的组件，Collapsible那么Collapsible视图本身不会增加。它调整组件，我的意思是它隐藏一些组件，然后显示新添加的组件。

这是一些代码：

相关问题 ：

1. 打开时组件视图更新时的可折叠高度不正确
2. 如果内容视图更新，则内容高度不会更新。

我该如何解决这个问题？

我创建了一个 Gatsby JS 网站，我想为文本使用一些简单的动画。库“react-animations”是我为范围选择的库。

安装时

我收到以下消息：

npm WARN eslint-config-react-app@4.0.1 需要 eslint-plugin-flowtype@2.x 的对等点，但没有安装。您必须自己安装对等依赖项。

npm WARN ts-pnp@1.1.4 需要 typescript@* 的对等点，但没有安装。您必须自己安装对等依赖项。

npm WARN tsutils@3.17.1 需要 > typescript@>=2.8.0 || 的对等方 >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta 但没有安装。您必须自己安装对等依赖项。

通过尝试以这种方式使用库：

它不起作用，并且在找到导入时收到以下消息：

找不到模块“react-animations”的声明文件。'c:path/node_modules/react-animations/lib/index.js' 隐含了一个 'any' 类型。尝试npm install @types/react-animations它是否存在或添加一个新的声明 (.d.ts) 文件，其中包含declare module 'react-animations';

我试过了

但它不存在。

关于如何解决的任何线索？需要打字稿吗？

非常感谢。

问题：

我有一个递归渲染嵌套列表的 React 功能组件。那部分工作正常。

我正在努力的部分是让包含嵌套列表的 div 在嵌套列表（不同大小）出现和消失时具有扩展动画。

因为内容的数量是未知的，所以简单地为 max-height 属性设置动画是行不通的。例如，当渲染一级列表时，框架的高度可能会扩大到 100 像素。但是，如果您将最大高度设置为 100 像素，则 div 稍后将无法扩展以容纳越来越多的嵌套列表。

需要动画的div是：

...并且不起作用的函数是名为“collapseFrame”的函数。

同样，我之前尝试在 max-height 属性上使用 CSS 过渡，但这远不是一个理想的解决方案，因为它在不可预测的高度上效果不佳。所以，如果可能的话，我不想那样做。

我遵循了一个教程，并在没有 React 的情况下使用 vanilla JavaScript（部分代码被注释掉），但是当将它翻译成 React 时，我不确定为什么我不能让代码工作。

目前，展开动画正在工作，但如果移除边框或将其更改为白色，它将停止工作。我不知道为什么。??

** 此外，折叠动画根本不起作用。'transitioned' 事件并不总是在 ref 对象上触发，有时会在它应该被删除后触发。

有人能帮我指出正确的方向吗？谢谢！

这是我的代码笔。

（我试图将它转移到 JS Fiddle，但它不起作用，所以请不要对此投反对票）。

https://codepen.io/maiya-public/pen/ZEzoqjW

（对 codepen 的另一次尝试，供参考。嵌套列表出现和消失，但没有过渡）。 https://codepen.io/maiya-public/pen/MWgGzBE

这是原始代码：（我认为在 codepen 上更容易理解，但粘贴在这里以获得良好的实践）。

索引.html

样式.css

虚拟数据：（嵌套列表将基于此对象呈现）

反应代码：index.js

我正在开发命运之轮，我希望轮子在旋转时迭代四次，并停止到一个特别给定的值。我想要的只是将轮子旋转四次并停在特定的切片上。我在想下面的代码可以实现我的想法。

我使用角度作为价值。我得到“toValue”的公式是“targetAngle * 4”。这可行，但我想像 Animated.decay() 一样在最后一次迭代中减速旋转。有没有更好的办法来解决这个问题？

我正在尝试使用钩子创建动画，但我的代码有问题。有谁能够帮我？我测试时没有出现错误，但图像没有出现。我正在尝试让图片在我的加载屏幕上旋转。

我使用 PanGestureHandler 和 ScrollView 编写了一个菜单。

问题是; 当 PanGestureHandler 处于活动状态时，ScrollView 的滚动不起作用。

我的意思是滑动功能正在工作，但滚动不起作用。

我的期望是同时使用这两个功能。

我在下面分享了我的实现代码。

任何想法？_

构造函数

使成为

我正在使用 react-animated-css，用于反应中的简单动画。我有一个要在<ul>标签中呈现的列表。我正在向列表的第一个元素添加动画。

此列表每 3 秒更新一次。并在数组的第一个位置添加新元素。问题是，在加载时动画正在发生，但在更新时没有。

这是完整的代码：https ://codesandbox.io/embed/ecstatic-cloud-qdpcj

由于我不符合条件，因此我无法创建名称为“react-animated-css”的标签。如果有人为此创建一个会很有帮助。