问题标签 [reactcsstransitiongroup]

一般反应的新手，我正在尝试使用 ReactCSSTransitionGroup 为导航栏设置动画，但看不到动画，而是在导航栏出现时有一点延迟。我无法弄清楚我错过了什么。也在这个项目中使用：react-router 和 css-modules。 感谢您的时间和精力！

页眉.jsx：

导航.jsx：

样式.scss（导航）：

我正在构建一个小的全局“吐司”反应组件。它提供了我从 redux 状态提供给它的 toast 列表。我试图让他们用 react's 动画进出ReactCSSTransitionGroup，我似乎能够获得进入/活动动画，但不能获得离开。

这是我的组件：

因此，它需要一个名为 display 的道具，其中包含一个列表toasts并呈现它们。我认为这可能与我将render()函数包装在一些逻辑中以确保敬酒但对象的存在（或不渲染）这一事实有关，但我不确定。

这是我用于动画的 css

enter 动画效果很好，但是当 toast 从 toasts 列表中删除时，它会立即从 dom 中消失。谢谢阅读！

我正在创建一个图像轮播，从右到左为图像设置动画。这似乎正在工作，期待平滑度。有一些锯齿状的动画，我无法弄清楚如何使它完美。我创建了一个小提琴，它在那里似乎比在我的网站上工作得更好。我认为图像的高度和宽度可能是一个原因。请检查小提琴

反应代码

CSS

我必须创建一些复杂的动画。使用 jQuery 或 VanillaJS 开发它们很酷，但我想我应该选择另一种使用 React 的方式。谷歌给了我 ReactCSSTransitionGroup 但它似乎已损坏且无人维护（根据此消息：github.com）。例如，我不能在开始动画之前进行延迟。

我还找到了一个名为 React-motion 的库，但我不确定它是否真的是我需要的工具。所以我想问你是否可以向我推荐一些关于它的东西。也许我应该使用 VanillaJS（使用 refs 和其他 ReactDOM 函数）？还是有另一种方法？提前致谢。

目前，我有许多从地图呈现的相同组件，如下所示：

所以我所做的就是用这样的过渡包装整个地图对象：

<TransitionGroup> {this.state.Tweets.map(t => <Tweet key={t.title} title={t.title} desc={t.desc} />)} </TransitionGroup>

this.state.tweets更新如下：

但是this.state.Tweets，无论出于何种原因更新时，其中的项目数<TransitionGroup>都不会更新。我可以componentWillEnter触发生命周期钩子，但我无法更新任何其他内容。有任何想法吗？

我试过添加this.state.Tweets作为道具，<TransitionGroup>但这似乎根本不起作用。

我正在构建一个带有 React 的个人网站，并试图在加载几秒钟后让一些 h2 淡入。我在以下组件上使用 ReactCssTransitionGroup：

CSS/SASS：

理想情况下，我希望每个 h2 一个接一个地过渡，但我试图先处理 react-addons，然后再跳到交错的淡入淡出。有没有人对 React 中的 css 转换有任何经验。尝试按照文档进行操作，但有点迷失了。任何见解都非常感谢！谢谢

我一直在试图弄清楚如何在滚动时触发反应 css 过渡组。假设我有一堆组件，这个例子在屏幕外渲染：

// 组件.jsx

// 样式.css

我希望在进入视图时触发过渡组，而不仅仅是在最初渲染组件时。我一直在仔细研究文档并探索预制的库/组件来实现这一点，但没有发现任何不涉及引入大型动画库的东西......我知道在我的鸟蛤深处有一种方法可以做到这一点，因此，在这里询问专业人士。你们加油。

我有一个交换子组件的组件（这是一个小测验，子组件是问题。我正在尝试使用ReactCSSTransitionGroup.

所以，我有一个渲染组件的函数，我正在交换包装，ReactCSSTransitionGroup如下所示：

renderQuiz 函数只是一个 switch 语句，它根据正确的状态返回正确的组件 - 如下所示：

Step 只是一个局部组件变量（this.state.step）。我看到这只是部分工作 - 当第一个组件加载时，我看到它淡入淡出，但切换组件之间没有过渡。

这是与过渡相关的 CSS：

不确定如何使它正常工作。任何投入将不胜感激。谢谢！

为这个问题的简单性道歉，但我是 React 的新手，并试图实现一个简单的 CSSTransitionGroup 来隐藏/显示一个元素，但带有淡入淡出、幻灯片等。文档看起来非常简单，但出于某种原因，下面的代码对我不起作用。

虽然 .box 在存在与否之间切换，但我在进入和离开时没有看到任何 CSS 转换。

我一定是做错了什么，因为我可以在其他在线示例中看到这个基本演示，但无法复制自己。请让我知道如何获得我的 CSS 过渡。

谢谢互联网

我是 React 的新手。我制作了一个带有按钮和图像网址列表的小应用程序。单击按钮时，图像 url 将添加到列表中。.map我使用标准函数渲染图像 url 列表。

我想在显示图像时制作一个快速的 ui 动画效果：淡入和从左侧滑入的组合。我尝试了 Velocity.js 并找到了velocity-react包装器。但我无法理解如何使用它。“标准”velocity-animate库也是如此。

什么是最好的？velocity-react，velocity-animate还是别的什么？我该怎么做？

JSX

renderThumb 函数

速度反应

我试图<img>像这样将动画不透明度从 0 包装到 1（从 docs 复制）：

我不断收到此错误：

警告：React.createElement：类型无效 - 期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象

两者都没有运气ReactCSSTransitionGroup（如下面的建议）。显示图像但没有动画：

解决了：

我移到<ReactCSSTransitionGroup transitionName="example">了褪色组件之外，瞧 :-)

使成为（）

渲染拇指（）