问题标签 [react-transition-group]

我正在尝试使用 gsap 为进入和退出的列表设置动画，所以我用<TransitionGroup>. 我想使用 componentWillEnter 和 componentWillLeave 来触发我的动画，但它们没有被调用。我已经检查了所有内容 1000 倍但无法弄清楚......我应该使用<Transition>这种动画来代替吗？

任何帮助将非常感激！

我试图从 react-transition-group 调用特殊的生命周期钩子来使用 gsap 实现动画。但是 TransitionGroup 组件阻止了 Box 组件的渲染，如果我从页面组件中删除了 TransitionGroup 组件，那么 Box 组件就会渲染..请帮我找出问题

我的 package.json 是

我有一个反应应用程序，我正在使用包中的<Transition>组件react-transition-group在创建和销毁组件时创建过渡动画。我在循环中设置了in 道具。但是，当组件即将被销毁时componentWillMount，我似乎无法弄清楚如何恢复in 道具。文档并没有真正说明退出过渡

这是我的代码：

我希望有人可以对这个问题有所了解。经过多次尝试，我能够正确地将 ReactCSSTransitionGroup 导入我的反应应用程序。现在我收到以下警告，但我的过渡不起作用。

警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。

我使用 ReactCSSTransitionGroup 元素将组件包装在主 App.js 文件中，如下所示。

我的组件已经有一个传递给它的密钥。我应该在哪里应用密钥？

我正在尝试使用react-transition-group库在使用react-router-config的应用程序中进行页面转换。

为了使 react-transition-group工作，我需要在 上添加一个 location 属性<Switch>，如下所示：

<Switch location={location}>

但是，由于<Switch>使用react-router-config语法时没有，我有点迷茫。有什么建议么？

这里和这里有关于此事的讨论，但似乎还没有解决方案。

我当前的组件看起来像这样，并且转换工作有问题。

我有一个简短的测验应用程序，正在尝试对其应用一些动画。我的想法是一次只显示一个问题，每个问题之间都有转换。我用作create-react-app样板，我正在使用react-transitions-groupv1 来应用所述转换。现在我的根组件看起来像这样：

我的Panel组件看起来像这样：

Form是应用我的过渡的地方，它看起来像这样：

最后，这是我的index.css文件：

我希望当我点击一个问题的答案时，下一个问题将在应用转换后显示。但是，当我单击答案时，实际发生的是立即显示下一个问题，两个问题之间没有过渡。我真的很茫然，因为我在这里做错了......

我想淡出一个元素并同时加入一个新元素。两个元素具有相同的父元素并占据相同的空间 - 一个正在替换另一个。我为此使用了 TransitionGroup 和 Transition。我遇到的问题是转换顺序执行 - 一个接一个。我希望它们同时运行。查看 DevTools 中的 Performance 选项卡，它们的进入和退出状态似乎同时触发。所以我怀疑这是对 CSS 转换如何工作的误解......但我想如果 TranstionGroup 根据指定的持续时间“调度”转换，我会从这里开始。以下是一些伪代码。一切都很好——除了我希望过渡并行运行。

问题是我有一个包含三种状态的表单：默认、错误和成功。根据状态，将特定组件渲染到 dom 中。当此组件进入或离开时，我需要添加淡入淡出动画。

我已经尝试过自定义 CSS、GSAP（但不想在我的项目中安装更多包），现在尝试使用 react-transition-group。

为了保持简单，我创建了“错误”组件，如下所示：

在索引页面上，我有：

对于某些原因，当this.state.formErroris时true，组件呈现并且淡入完成，但是当状态变为 时false，淡出不起作用。

我目前正在使用 Portals 在我的应用程序中实现模态组件。我想要实现的是，当 Modal 组件被渲染时，它应该淡入，当它不再渲染时，它应该淡出。

查看 react-transition-group 文档，似乎必须使用道具才能实现这一目标，但是我想要一个没有任何形式的状态或道具的解决方案。考虑：

应用程序应该正常加载，但是 Modal 应该淡入。当 Modal 不再基于这些组件之上的某些条件呈现时，它应该淡出。

这是实际的代码

对于 Fade 组件：

有什么建议吗？我确信这曾经有效，在 React 16 和 react-css-transitions 更改为 react-transition-group 之前，但我很难弄清楚这一点。

需要明确的是，我可以使用状态/道具进行转换并有一个工作示例，但这不是我想要实现的。我想在渲染时淡入，在未渲染时淡出...

谢谢！

如何让 React Transition Group 的生命周期运转起来？

我有一个包含 2 个组件的简单示例。项目之一，它将使用 ReactTransitionGroup 和索引组件，这是我希望从 ReactTransitionGroup 接收生命周期的项目：

还有我的索引组件：

我只需要生命周期调度。

我发现了一篇关于我的问题但我无法复制结果的精彩文章： https ://medium.com/@slapspapayas/reacttransitiongroup-explained-through-failure-629efe364866

反应版本：^16.2.0

React 插件过渡组：^15.6.2

谢谢！