问题标签 [react-animations]

我正在尝试将萤火虫动画添加到 react 中的组件中（我尝试使用的代码在这里https://codepen.io/celli/pen/xZgpvN）。如果我有一个简单的 HTML / CSS / Javascript 设置，我会知道该怎么做，但我对如何在 React 的上下文和单个组件的范围内集成这个动画感到困惑。我把下面的代码放在哪里？如何在组件中引用它？

其次，我在哪里把 CSS 代码放在下面？

所以在我的应用程序中，我通过键入添加 react-animation-components

然后我导入FadeTransform属性

但是，我收到此消息，指出无法识别react-animation-components的声明。

我输入这个

但仍然没有。

为什么会这样？

我是 ReactJS 的新手，并且从未在 React 中使用 CSS 中的任何动画。我正在尝试使用 CSS 将输入的宽度转换为焦点，但没有成功。下面是我的 JSX 和 CSS 代码

点击时发生的情况是，它会在 2 秒内将宽度从 200 切换到 250，而不会出现过渡。通过一些研究，我发现有时当元素需要重新渲染时（如果我错了，请纠正我），过渡不起作用，为此，'react-transition-group' 库中的 CSSTransition 可能很有用。我导入了库，我的代码现在看起来像这样

但是当我去控制台查看单击输入时 CssTransition 元素的哪些参数发生变化时 - 我看到它们都没有变化（例如出现、输入、退出......）

我找不到任何有用的演示如何完成这项工作，如果有人能帮助我提供一个类似的 JSFiddle 示例或某种解释，我将不胜感激。

我的主要问题是如果元素需要重新渲染，如何在 ReactJS 中单击时转换输入元素的宽度/高度？

我正在尝试使用 react-native 的 Animated 将 react 组件移植到 React-Native

我设法创建了圆圈，它的轨道和工作良好。

但我不知道如何在 react-native 的 Animated 中编写这些规则

在@keyframes fulfilling-bouncing-circle-spinner-orbit-animation我需要等到动画的一半然后我应该把它缩小和放大两次

并且在@keyframes fulfilling-bouncing-circle-spinner-circle-animation我不知道如何使用反应原生动画添加和删除样式时，一直在思考它，但我没有想出一个主意。

那么有没有一种方法可以添加时间序列并在这些帧中执行我想要的操作，就像@keyframes 一样。

想要创建一个投资组合/项目页面，用户单击缩略图会全屏显示并进入其他页面

我想我可以使用姿势翻转来实现这一点

https://codesandbox.io/s/fourth-react-pose-example-qj92p问题是我如何在页面上使用多个元素来做到这一点

这是示例站点

我是新手，当我点击缩略图如何删除所有其他人（淡入淡出）时，我们可以在 jquery 中简单地做到这一点而不是选择器

我正在尝试在我的 RN 应用程序中构建这个粘性标题导航栏。基本上，基于 Y 滚动突出显示当前类别的类别的水平滚动视图。

感谢伟大的 William Candillon 的视频 ( https://www.youtube.com/watch?v=xutPT1oZL2M&t=1369s ) 我已经很接近了，但我有一个主要问题。

我在滚动时使用插值来转换类别视图的 X 位置。然后我有一个包裹这个动画视图的滚动视图。问题是 Scrollview 不起作用，因为它没有动画视图位置的参考。正如您在下面的 gif 中看到的（蓝色 -> Animated.View / 红色 -> Scrollview）

我喜欢插值方法，因为它是声明性的并且在本机线程上运行，所以我尽量避免创建附加到 scrollTo() 函数的侦听器。

你会考虑什么方法？

我是反应钩子的新手，试图用反应钩子重写我的一个组件。谁能告诉我为什么回调动画不起作用？回调确实触发了，但 defaultSize 根本没有改变。下面是我以“React Class”方式编写的原始组件，它按预期工作。一些帮助将不胜感激：D

基本上我想用 gsap 对元素的进入/退出做出反应，如果没有复杂的黑客，似乎没有办法做到这一点，我是反应动画和 GSAP 的新手，谁能帮助至少指导我去哪里看，基本上我有一个输入元素和一个按钮，当单击按钮时，输入应该顺利消失，然后根据按钮状态卸载，我需要帮助进入/退出元素。这是我的代码：

正如您在此处的视频https://www.youtube.com/watch?v=hhBGUp9_GAY&feature=youtu.be中看到的那样，我在动画完成后将文本居中时遇到了问题。无论屏幕宽度如何，我都希望在所有设备上都完美地水平居中。我正在使用动画 API。有什么建议么？

这是我的方法

我正在尝试构建一个具有左右轮播的反应原生屏幕，在轮播的每个面板中都有一个带有项目列表的垂直平面列表。在平面垂直平面列表中最多有 8-10 个轮播面板和 5-30 个项目，因此在渲染的最多项目中可能有 300 个，但通常是 100 个。

我正在调用 API 并每 2-3 秒检查一次服务器上的数据，并使用新数据设置组件中的状态。这目前有效，并且子组件中的数据数据会按应有的方式更新。

flatlist 中的每个项目都是可点击的，这会触发在页面中启动的模式弹出窗口。我遇到的问题是模式弹出窗口需要 4-5 秒才能出现和关闭。此外，当模态最终开始消失时，动画会变得生涩，并且深色背景层似乎在被移除时闪烁。

我首先尝试使用内置模式并且还使用了 react-native-modal 包，两者都是相同的。

我尝试使用 InteractionManager.runAfterInteractions 和 shouldComponentUpdate(nextProps, nextState) 来尝试阻止我的 api 调用，直到动画完成或阻止我的 isModalVisible 状态属性在我更改它时导致重新渲染。

下面的代码，任何帮助将不胜感激。

尝试 1

我有一个想法，这可能是我使用了一个名为“react-native-snap-carousel”的第三方轮播库，所以我试图用一个看起来很糟糕的滚动视图替换它，并让我所有的平面列表/项目都在其中呈现，但这确实没有改善仍然是 2-3 秒的弹出时间延迟。

尝试 2

我发现了一个叫做 react.purecomponent 的东西，它可能应该对状态/道具进行浅层比较，并且只在项目/状态实际发生变化时触发重新渲染，这可能意味着动画/ui线程导致问题停止。但没有更好的（在模拟器和设备上）在模态显示之前仍然长时间停顿

尝试 4

通过在底部轮播下方的页面底部放置一个按钮来触发平面列表之外的模式，从而将平面列表排除在外。

这导致没有改进或性能。那么还有什么导致这个问题。是因为间隔导致我的组件不断重新渲染吗？因此，必须有一种方法可以暂停我缺少的组件重新渲染。任何人？