调试 React CSS 转换答案

【问题标题】：Debugging React CSS Transitions调试 React CSS 转换
【发布时间】：2015-07-18 14:24:02
【问题描述】：

我经常在控制台中收到来自 React 的以下警告，这会导致一些无法解释的动画错误。

我检查了以下常见的嫌疑人：

<ReactCSSTransitionGroup> 元素的所有子元素都具有key 属性集。
所有<ReactCSSTransitionGroup> 元素都设置了transitionName 属性。
所有transitionNames 都有适用的.example-enter、.example-enter-active、.example-leave 和.example-leave-active 类设置动画持续时间小于5000 毫秒。
所有ReactCSSTransitionGroup 元素都在修改其子元素之前安装。

有什么办法可以调试吗？我有一个相对较大的应用程序，React 并没有真正引导我查看哪个 DOM 元素触发了警告，或者转换名称是什么，或者基本上任何有用的东西。

更新： TimeoutTransitionGroup 有更好的警告信息，像这样：

【问题讨论】：

您确定要添加和删除 ReactCSSTransitionGroup 的 children 吗？如果您添加和删除 ReactCSSTransitionGroup 本身，它不会动画。
啊，是的，我忘了提，我还绝对确保 ReactCSSTransitionGroup 元素已安装之前修改孩子。我肯定在修改孩子们。

标签： css reactjs css-animations

【解决方案1】：

现在 React v0.14 已经发布，CSSTransitionGroup 现在可以像 TimeoutTransitionGroup 一样进行超时。

附加组件：为了提高可靠性，CSSTransitionGroup 将不再监听过渡事件。相反，您应该使用诸如 transitionEnterTimeout={500} 之类的道具手动指定过渡持续时间。

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#new-deprecations-introduced-with-a-warning

【讨论】：

【解决方案2】：

[更新]

从 React 0.14 开始，用于检测转换的错误浏览器行为已被手动指定超时所取代； see Alex's answer for details.

[旧答案]

我不确定跟踪哪些组件有问题的最佳方法，但目前（从 v0.13.2 开始）bugs in ReactTransitionGroup 的浏览器实现中存在错误@和 987654326@/transitionend 事件有时会导致这种情况发生。查看issue #1326 以获得一些有用的指示，以及您可以尝试的alternative implementation（使用setTimeout 而不是转换事件）。

【讨论】：