问题标签 [react-transition-group]

我正在尝试使用React Starter Kit在 React 中的页面之间淡入和离开。

受到在初始渲染上应用 React.js CSS 转换的帖子的启发，我为每个页面加载的根组件执行了此操作：

在css中我有：

安装组件后，将显示元素，但没有任何进入过渡。我在那里做错了吗？

谢谢！

我正在尝试以这样的方式为按钮设置动画，当您单击按钮时，下一个按钮将逐渐消失。问题是被单击的按钮不会动态更新其宽度，它会在过渡结束时更新。

这里是沙盒

演示仅在您单击拒绝按钮时才有效。

如何在转换发生时使拒绝按钮更新其宽度？我想不通，提前谢谢你。

演示和代码 => https://codesandbox.io/s/73ymn2k911

根据我通过开发工具的观察，它最初知道在哪里放置组件但忘记设置opacity: 1或删除旧组件

我怀疑问题出在 app.js请参阅下面的更新。

但我可能是错的。单击codesandbox.io上的导航链接后，它会在其控制台上打印两个错误，这些错误在我的实时测试站点上的 chrome 开发工具未报告：

这一切都基于我去年在博客上发布的旧依赖项的示例。我正在尝试从示例中学习，并且很难让您了解每 6 个月更改一次的内容。

如果你能帮忙，谢谢！

更新：我一直在查看 react-transition-group v1 到 v2迁移指南，我认为问题实际上是我的转换组件，我不知道如何修复。

I am animating the entry and exit of an array of items using TransitionGroup and CSSTransition (with a fade effect). I would like the items to appear with a slight delay between them instead of all at the same time. Note that the delay can be lower than the duration of the animation.

With my current code, all the items are fading-in at the same time (as expected). In my render function, I have the following to animate the entry and exit of my components:

And the CSS:

How would I go about adding a different delay for each item?

我有一个图像查看器组件，它是一个大图像，下面是 3 个较小的图像。当您将鼠标悬停在底部图像之一上时，它会将大图像更改为相应的图像。当较大的图像发生变化时，我想添加淡入/淡出过渡。到目前为止，我可以在鼠标上进行淡入和淡出，完全留下较小的图像，但不会在图像之间悬停。这是我的代码：

这里还有一个链接到我到目前为止的过渡： https ://peaceful-jones-ee2ca2.netlify.com/ 没有过渡： https ://practical-lamport-9cc94e.netlify.com/

我正在尝试react-transition-group将一些动画添加到我拥有的列表中。

这是我的一般设置，我有呈现多个子项的列表组件。有许多交互会导致从该列表中添加/删除项目。其中一些操作需要使用动画来删除组件，但我似乎无法让它工作，我猜我可能在这里遗漏了一些东西。

这是我的基本设置：

我已经验证了我的状态逻辑中的一切都很好（即shouldAnimate设置true为我所期望的，但它仍然没有动画。

有什么建议么？

编辑：创建了一个显示问题的小提琴，我想我现在看到了这个问题。 http://jsfiddle.net/af0ee2eo/2/

正如我上面所描述的，在用户采取行动之前，我不知道该行动是否应该导致项目在从列表中删除时产生动画效果。我设置shouldAnimate正确，但在下一次渲染之前，我从列表中删除了该项目。如果我将删除延迟到下一次渲染之后一切正常，但每次都必须这样做很烦人（这就是我通过小提琴底部的“使用延迟？”复选框演示的内容）。我希望有一种方法可以将状态注入到由 TransitionGroup 的组件状态持有的项目的状态中。

如果有人有任何其他想法，我如何在没有setTimeout或requestAnimationFrame渲染黑客的情况下解决此问题，请告诉我，否则我只会将此问题标记为已回答。

所以我不明白为什么人们喜欢用React Transition Functions不同的方式调用

过渡组： import TransitionGroup from 'react-transition-group/TransitionGroup'

ReactCSSTransitionGroupimport ReactCSSTransitionGroup from 'react-transition-group'

CSSTransitionGroupimport CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'

所以，问题是这些调用之间存在一些差异（性能，功能），或者只是开发人员的想法 - 如何从react-transition-group...调用转换

PS 我在网上找不到这个问题的答案。

我会很高兴得到任何帮助...

我尝试在 TransitionGroup 中为我的 Transitions 编写 HOC。如果没有 HOC，它看起来像这样：

你可以在这里看到整个代码

我试图将动画分离到 AnimationContainer 组件：

动画容器.js

但是当我尝试用 AnimationContainer 替换 Transition 时，它不起作用。它有什么问题？

尝试使用 CSSTransiction 组件。我需要显示一个使用 css 类进行动画处理的面板。第一个类定义主要位置，第二个定义面板打开时的位置（顶部：0）。

出现有效，但退出无效。onEntered 会触发，onExied 不会。

CSSTransition 组件缺乏文档，我尝试了不同的组合，但没有成功。有任何想法吗？

CSS：

反应组件：

我对 ReactCSSTransitionGroup 有点困惑。阅读文档

• https://reactjs.org/docs/animation.html

• http://reactcommunity.org/react-transition-group/

在使用的示例中：ReactCSSTransitionGroup 和单个 CSSTransition，在列表示例 {CSSTransition, TransitionGroup}

所以他们都做同样的事情（动画），但 ReactCSSTransitionGroup 看起来像这样

全部来自文档示例

单个 CSSTransition

{CSSTransition, TransitionGroup} - 像这样

那么什么时候我应该/更好地使用 ReactCSSTransitionGroup, single CSSTransition 或 {CSSTransition, TransitionGroup} ？