问题标签 [react-transition-group]

在我的应用程序中，我有一个语音气泡，其中包含由 redux 控制的滚动文本。使用动画 css库，我试图让文本在进入时淡入并在文本更改时淡出。

现在我有这样的事情：

SpeechBubble.js

Animate是一个可变组件，在本例中是我的FadeInUpOutDown动画（我从上面的 CSS 库中获取了所有动画样式）：

查看 React Transition Group的文档，我一生都无法弄清楚如何获取滚动文本。我的意思是，当我改变我的文本缩减器的状态时，我希望旧文本淡出，新文本在一个无缝的动作中全部淡出。现在我的文字刚刚淡出。

我正在尝试使用反应过渡组构建磁性滑块。它只能向下工作，从向下变化到向上，向上变化，但不能从向上变化到向下。

我想我一定是在 childfactory 做错了什么。

这篇文章没有让我更进一步： React CSSTransition wrong class used on exit

我的应用程序的相关部分。它在Wheel 上滑动合成事件：

index.module.css：

屏幕录制视频的链接： https ://youtu.be/KdBRZNlBj7M

我想问题是从类转换-向上-进入-活动到转换-向下-退出

我有以下应用程序组件：

它工作正常，但每个动画都会立即执行。例如，如果我从/rules到/history，我在两个组件上都获得了完整的动画，但历史组件需要来自服务器的数据，因此动画应用于空容器。

如何在 react-transition-group 组件中暂停动画？我有 Redux，所以我可以loading在我的应用程序的任何地方更改变量。另外，我不想在应用启动时预加载商店中的所有数据。

Here is a jQuery example for a progress bar animation. and I want this feature in Reactjs without jQuery. How to implement this feature.

这就是我使用过渡组的方式。这是我在 style.css 中的课程

当我通过更改idToVarStates数据添加元素（VariableDefine）组件时，我根本没有得到任何动画。这里有什么问题？如何解决这个问题？

正如这里的答案中提到的：为什么 react-addons-css-transition-group 在这里不起作用？，我尝试使用该react-transition-group模块，但是当我开始反应时它给出了以下错误。我该如何解决 ？

这是我的反应代码：-

我的应用程序使用“react-transition-group”在页面之间路由，但每次我的投资组合 id 更新时，它都会重新渲染整个组件并运行过渡动画。我怎样才能做到这一点，一旦你进入我的投资组合页面，当只有 :id 更改时它不会重新呈现投资组合组件？

如果我单击此按钮，我在应用程序组件中有一个按钮，我会在组件中的数组中获得下一个项目，但现在的问题是淡入转换仅适用于第一个项目，而不适用于下一个项目。我怎样才能让淡入过渡适用于下一个项目？

我的代码：

目标

我目前正在尝试使用React-Transition-Group为表格的行进出动画。可能会发生两种不同的情况：

• 表的全部内容将被换出（最常见的选项）
• 可以添加和删除单独的行

我现在在哪里

我使用这个待办事项列表示例作为制作表格动画的起点。这是我的沙盒。

我的主要问题是当表数据被完全换出时，您可以同时看到两个数据集。旧数据滑出，而新数据滑入。这会导致旧数据在过渡时迅速向下（见下图）。

理想情况下，初始表数据会在新数据进入之前完全消失，但新数据会在旧数据存在时弹出。

代码

通过行映射的表格道具

更改表数据集的功能：

我使用 React Router 自己的动画示例作为起点，并获得了一个简单的始终淡入动画效果。

问题是，这种设置太简单了，我需要任何东西，从根本没有过渡到任意数量的过渡（例如，向左和向右定向运动，复制 IOS 应用程序过渡）。

一旦我开始调整 的exit和enter道具，事情的TransitionGroup变化就会崩溃，没有什么能像弄乱已经存在的元素并创建一堆配置一样起作用（我试过移动和道具无济于事） ：classNamesCSSTransitionexitenterCSSTransition

有没有像这样控制动画，可能一起禁用它们？如果没有，是否有动画/库为浏览器应用程序提供导航和转换等原生应用程序？