问题标签 [reactcsstransitiongroup]

我一直在使用 ReactCSSTransitionGroup 进行基本动画 - 比如从左到右和从右到左滑入 2 张图像，但无法实现它 - 我在这里缺少什么 - 图像动画，但尽快回到原来的位置动画结束了 - 它在屏幕上看起来不太好。

CSS：

我正在尝试将animate.css中的“反弹”动画实现到 React 组件中。

到目前为止，我拥有的 CSS 是：

我的反应代码是：

到目前为止，它并没有真正起作用，它确实使文本变红，但仅此而已。我不能让“反弹”工作。

感谢帮助。

我的代码与官方React-Router git repo中的示例非常相似。

这是一个显示问题的代码笔。

问题出在这里：不是等待transitionEnterTimeout属性中指定的时间，而是立即呈现新元素。然后两个 css 动画（进入和离开）同时运行。之后，前一个元素被删除。

在更复杂的设置中，我在本地也遇到了同样的问题，这就是为什么我制作了简单的代码笔来查看问题所在。

我正在使用所有框架的最新版本（react、react-router、react-addons-css-transition-group）

我对 React 很陌生。我正在尝试通过实施完整的 CRUD 来学习。但是，我无法让动画很好地从列表中删除课程。

我已经配置了动画 ontransitionAppear和 on transitionLeave。transitionAppear作品还行。我无法得到transitionLeave

这是我的组件： https ://github.com/leonardoanalista/react-crud/blob/master/src/components/course/CourseListRow.js

这是动画的 CSS： https ://github.com/leonardoanalista/react-crud/blob/master/src/style.css#L66

请让我知道是否有更好的方法。

任何帮助将不胜感激！

欢呼莱昂纳多

我正在关注 Chang Wang 的使用 HOC 制作可重用 React 转换的教程和ReactTransitionGroup（第 1 部分第 2 部分）以及 Huan Ji 的页面转换教程（链接）。

我面临的问题是React.cloneElement似乎没有将更新的道具传递给它的一个孩子，而其他孩子确实正确地收到了更新的道具。

首先，一些代码：

过渡容器.js

TransitionContainer是类似于App环记教程中的容器组件。它将状态的一部分注入它的孩子。

的孩子TransitionGroup都是一个 HOC 的实例，称为Transition（代码进一步向下）

过渡.js

Transition类似于 Chang Wang 的 HOC。它需要一些选项，定义componentWillEnter+componentWillLeave钩子，并包装一个组件。TransitionContainer（上）注入props.transitionState到这个 HOC 中。但是，有时即使状态发生变化，道具也不会更新（请参阅下面的问题）

选项

选项具有以下结构：

转换生命周期（onEnter 或 onLeave）

• 当组件被挂载时，actions.registerComponent被调度
  • componentWillMount
• 当组件的componentWillLeave或componentWillEnter钩子被调用时，相应的选项切片被发送到doTransition
• 在 doTransition 中：
  • 调用用户提供的 transitionBegin 函数 ( optionSlice.transitionBegin)
  • 默认action.willLeaveoraction.willEnter被调度
  • 为动画的持续时间设置了超时 ( optionSlice.duration)。超时完成后：
    • 调用用户提供的 transitionEnd 函数 ( optionSlice.transitionEnd)
    • 默认actions.transitionComplete发送

本质上，optionSlice 只允许用户传入一些选项。optionSlice.transitionBegin并且optionSlice.transitionEnd只是在动画进行时执行的可选功能，如果适合用例的话。我目前没有为我的组件传递任何东西，但我希望尽快把它变成一个库，所以我只是覆盖我的基础。

为什么我还要跟踪过渡状态？

根据进入的元素，退出的动画会发生变化，反之亦然。

例如，在上图中，当蓝色进入时，红色向右移动，当蓝色退出时，红色向左移动。然而，当绿色进入时，红色向左移动，当绿色离开时，红色向右移动。为了控制这一点，我需要知道当前转换的状态。

问题：

包含两个元素，TransitionGroup一个进入，一个退出（由 react-router 控制）。它传递一个调用transitionState它的孩子的道具。HOC（的Transition子级TransitionGroup）在动画过程中调度某些 redux 动作。正在进入的Transition组件按预期接收 props 更改，但正在退出的组件被冻结。它的道具不会改变。

退出的总是没有收到更新的道具。我尝试过切换包装组件（退出和进入），问题不是由于包装组件造成的。

图片

屏幕过渡：

React DOM 中的转换

在这种情况下，现有组件 Transition(Connect(Home))) 没有收到更新的道具。

任何想法为什么会这样？提前感谢所有帮助。

更新1：

我已经将我的更新TransitionContainer到上述内容。现在，componentWillEnterandcomponentWillLeave钩子没有被调用。我React.cloneElement(child, {...})在childFactory函数中记录了，并且钩子（以及我定义的函数，如doTransition）存在于prototype属性中。只有constructor,componentWillMount和componentWillUnmount被调用。我怀疑这是因为key没有通过React.cloneElement. transitionState并且dispatch正在被注入。

更新 2：

在进一步检查了 TransitionGroup 源代码后，我意识到我把钥匙放错了地方。现在一切都很好。非常感谢你的帮忙！！

考虑一个用例：一个内部带有文本的块（从存储中获取文本）。当文本更改时 - 块顺利消失，另一个块出现。

伪代码以获得更好的说明：

当 state.text 改变时会发生什么？

1. 新Block出现，因为key变；componentWillEnter为它启动动画。伟大的。
2. 旧块被重新渲染并componentWillLeave为其启动动画。
3. 当第一个动画完成时，重新渲染再次发生。

问题是第 2 步：旧元素应该与旧数据一起消失，但由于重新渲染，它会将他的内容从 更改为新内容store，因此用户会看到：

1. store.text = 'Foo'. 用户在屏幕上看到一个带有文本“Foo”的块。
2. store.text = 'Bar'. 用户看到两个块，屏幕上都有文本“栏”。一个街区正在消失。
3. Foo动画结束，用户在屏幕上看到一个带有文本的块。

我相信现在使用过渡非常普遍，这应该是一个常见的问题，但我很惊讶我找不到任何相关的东西。我能想到的最好的主意是在元素即将离开时“冻结”元素上的道具（或传递 previous store，因此它会使用以前的数据重新渲染），但这对我来说感觉很糟糕。

解决这个问题的最佳方法是什么？

ReactCSSTransitionGroup 仅在添加或删除组件时添加类，但在数据更新时它不会动画...

我想搬点东西bottom: +/- 100px。

因此，当聚焦时，它会向上滑动。当不聚焦时，它会滑回。

我创建了这个 React render()：

然后我key通过更新切换它的状态this.props.trayOpen

然后我的 Less 是这样的：

采用来自animation.less：

不幸的是，这似乎不起作用。什么都没有发生。没有动画。不太清楚为什么。

更新

ReactCSSTransitionGroup 的问题在于它enter-active同时发生leave-active。如果您要切换不透明度，这似乎不是问题。但是，如果您像我一样上下移动事物，那么您会同时看到两者。

如此处所示：

我有一个相对简单的用例，涉及一组按钮，每个按钮代表一个类别。

单击其中一个类别按钮时，其相应的子类别将出现在下面的部分中。当您单击这些类别按钮之一时，子类别列表将替换为新的子类别，具体取决于您刚刚单击的类别。

一个例子可能是（如果我要单击类别 A）：

现在，当我在已经单击一个类别后单击另一个类别时，就会出现问题。我注意到上一个操作的子类别会在视图中持续显示一小段时间。例如，这是我在点击类别 A 后点击类别 B 时发生的情况的快照。

即使我单击了类别 B，并且子类别列表被替换，上一个子类别列表（类别 A）中的元素仍会在短时间内（数百毫秒）保持安装状态。

这只发生在我将子类别部分包装在 ReactCSSTransitionGroup 标记中时。我的每个子类别的键是子类别的字符串名称，因为它们在我的数据库中都是唯一的，所以我认为我的问题与设置的键无关。

这是我的 ReactCSSTransitionGroup 标记的代码：

这是我的动画 css 文件中的动画代码：

同样，这只发生在使用 ReactCSSTransitionGroup 时。它在视觉上令人不快。尽管淡入淡出在技术上是有效的，但它完全被旧元素在很短的时间内逗留而不是被正确卸载的事实所破坏。

给出票价想法的示例图像：

我有两个主要组成部分

1. 第一个组件 ( NewsFeed ) 默认状态是展开大小 (1000px)
2. 第二个组件 ( Chat ) 默认状态为折叠(200px)，其中只有带有姓名的人头像显示在列表中。

两个 Chat 子组件

1. PeopleList呈现人员列表。默认状态为visible，大小为 200px （使聊天组件的大小处于折叠状态。）
2. ChatBox呈现用户和她的人之间的对话。默认状态为hidden，大小为 400px。

设想

1. 单击聊天组件中的人名将展开它，显示附加到 PeopleList 右侧的ChatBox组件，其中Chat声明更改为展开，ChatBox状态变为可见，将NewsFeed组件更改为其折叠状态，其大小减小以容纳聊天组件处于新状态（扩展）。

谢谢。