使用 ReactCSSTransitionGroup 不会发生过渡

Question

我已将 React、React-DOM 和 React Addons 库添加到我的笔中。

这是我的笔：

https://codepen.io/graven_whismas/pen/QBQQmj

单击按钮时，应出现状态字，从初始不透明度 0.4 到 1。

但是当我点击按钮时，页面上的所有内容都消失了。

这是我得到的错误：

https://reactjs.org/docs/error-decoder.html?invariant=254&args[]=.0

Answer 1

您笔中的代码有一些问题会导致您遇到的问题。

第一步是使用库的开发版本，以获得更好的错误消息。使用 https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-with-addons.js 而不是 https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-with-addons.min.js.

其次，加载多个版本的 React 可能会导致您拥有 issue。从您正在加载的外部脚本列表中删除 https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js。

第三，动画的离开超时时间有误。你已经写了 transtionLeaveTimeout，它应该是 transitionLeaveTimeout。使用这种类型，转换库将抱怨缺少属性.

此 CodePen 总结了您需要进行的更改。

使用 ReactCSSTransitionGroup 不会发生过渡

Transition not happening using ReactCSSTransitionGroup

reactjs

reactcsstransitiongroup