问题标签 [reactcsstransitiongroup]

我正在尝试通过反应学习 css 过渡组。当我运行以下代码时，我的页面将淡入。

但是，我真正想要做的是，当我从 about url 转到 career url 时，我希望 about us 组件淡出，并让事业组件淡入，反之亦然。所以我试着做这个代码：

但是这段代码似乎没有效果。当我在 about url 和 career url 之间切换时，这两个组件会突然隐藏和显示。如何让淡入淡出过渡工作？

我在我的项目中使用 ClojureScript。一开始我使用了 Reagent 和 Material ui，尤其是 Stepper 组件。我的问题是我想使用 CssTransitionGroups，因为我需要导入 react-with-addons。问题是两个“库”没有一起工作。这是项目.clj

所以使用 CssTransitionGroups 的第一步是定义

但除非 Material.ui 不包括在内，否则这是行不通的。不知何故，material.ui 覆盖了 React.addons。如果您尝试在浏览器的控制台中键入 React.addons，如果还需要 material.ui，您将得到未定义。他们分别工作。

所以我试图在加载主页时显示带有 ReactCSSTransitionGroup 的转换。它是在jumbotron下方显示项目列表。此商品来自 Redux 商店。它们是从一个知道 Redux Store 的名为 home_index.js 的容器组件传递的。组件本身 'poll-list.js' 包含 poll-links，即要转换的项目；它（及其子）是一个 DUMB 组件。意思是，它没有状态，也不知道 redux 存储。（这些组件甚至可以使用 ReactCSSTransitionGroup 吗？）

无论如何，在我的一生中，我不能让这种淡入淡出过渡到工作。我知道我一定做错了什么......但无法弄清楚。

}

这里是 CSS（注意我不是在休假，我已将 Appear 设置为 true，我只是希望这发生在主页的初始加载时）

此外，将 ReactCSSTransitionGroup 放在这个级别，在这个元素中，会让我的 flexbox 变得很奇怪。组件不再是 4 列（或基于屏幕宽度的多列），它们位于中心下方的一列中......

我在哪里放置过渡组 HOC？

我一直在阅读React Animations (React CSS Transition Group)的官方文档，但我有点不清楚超时值的用途——尤其是当我在我的 CSS 中设置转换时。这些值是延迟、动画的持续时间，还是该类在被删除之前应用了多长时间？它们与我的 CSS 中设置的过渡持续时间有什么关系？

例如，如果我要在组件进入/离开时进行简单的淡入/淡出，我还会在我的 CSS 中设置不透明度和过渡持续时间。然后组件是否根据传入此值的时间或在我的 CSS 中设置的持续时间进行动画处理？

这是官方文档提供的示例：

我的反应组件

我的 .css 文件

谢谢！

我正在构建一个自动幻灯片，每 5 秒切换一次图像。当新图像进入时，我使用 ReactCSSTransitionGroup 创建淡入方法。问题是当新图像淡入时，旧图像仍然存在并且两个图像都显示在屏幕上，旧图像不会离开直到新图像完全显示。我该如何解决？

这是我的幻灯片组件来显示图像：

这是我称之为 Slide 组件的父组件的一部分

这是在父级的 render() 方法中设置转换的选项

这就是风格

基本上在父组件中，我有一个 setInterval 方法，它每 5 秒更改一次活动图像。那么如何在新图像开始褪色时让旧图像消失，这样它就不会改变我的页面？谢谢

React.js 我对下面的 React.js 代码有疑问。我正在尝试使用“React-router.Link”在页面转换之前设置动画。和 ReactCSSTransitionGroup。

版本反应：'15.2.1' react-addons-css-transition-group：'15.2' react-router：'2.6.0'

我想得到生命周期事件，所以我可以使用 JS 而不是 CSS。如果你知道正确的做法，请告诉我。谢谢你。

例如）componentWillLeave 等...

PS 我试过这段代码，但 componentWillLeave 没有触发。

我正在尝试在文本输入中显示下一个通知，以通知用户他们的文本已保存，然后将该通知文本淡出。

基本上，当提交相应的文本输入时，我正在尝试复制此操作。

$(this).fadeOut().next().fadeIn();

我想不出任何办法让它淡入，然后淡出，这不是荒谬的迂回。

我也在使用 Redux，并且想使用它，但这不是必需的。任何意见，将不胜感激。

问题：

动画输入/输出的组件在过渡之间留下空白。

期望的输出

1. 初始视图有一个 img FOO。
2. onEvent，挂载视频BAR。开始淡出 img
3. 在 BAR 完成安装后，FOO 应该已经完成​​淡出

当前战略

1. 使用 reactcsstransition 组
2. 组件逻辑类似于从这篇文章接受的答案中获取的这个jsfiddle

这里的骨架

foob​​ar 类扩展组件 {

}

伪代码

1. 最初渲染 FOO（完成）
2. onClickEvent, setState for "mounting" for BAR
3. 安装时，FOO 开始淡出（缓慢）
4. 安装时，BAR 开始淡入（更快）
5. 当 BAR 视频完成时，反向处理，以便 FOO 挂载，而 BAR 淡出

感谢大家！如果您需要任何澄清，请告诉我:)

我在父组件中有以下代码 - 默认情况下，Module1 将显示并在点击时，它被 module2 替换 - 有这个逻辑，当 module2 切换时尝试添加一些基本的淡入/淡出，但转换确实不会发生..我在这里想念什么？

似乎 React-Virtualized 不支持开箱即用的动画，但是否有可能（并且合理？）用于ReactCSSTransitionGroup实现过渡？

在我的情况下，我想对虚拟化列表中的元素进行移除动画（例如，淡化不透明度或缩小高度）转换。