为什么 react-addons-css-transition-group 在这里不起作用？

Question

import CSSTransitionGroup from 'react-addons-css-transition-group' ; 

class VariableDefinitions extends Component {

  render() {
    const { idToVarStates } = this.props;

    const varHtmlList = Object.keys(idToVarStates).map(id => {
      return (
        <CSSTransitionGroup
        transitionEnterTimeout={1000} 
        transitionLeaveTimeout={1000}
        transitionName="fade"
        key={id}
         >
            <VariableDefine id={id} key={id} {...this.props} />
        </CSSTransitionGroup>
      );
    })
}}

这就是我使用过渡组的方式。这是我在 style.css 中的类

.fade-enter{
  opacity: 0;
  height: 0%;
}
.fade-enter-active{
  transition: all 1s ; 
  height: 100%;
  opacity: 1;
}

.fade-leave{
  opacity: 1;
}
.fade-leave-active{
  transition: all 1s ;
  opacity: 0;
}

当我通过更改 idToVarStates 数据添加元素 (VariableDefine) 组件时，我根本没有得到任何动画。这里有什么问题？如何解决这个问题？

Answer 1

简单的答案。包裹已被移动。根据react-addons-css-transition-group 的 npm 页面。

此包中的代码已移动。我们建议您使用 CSSTransitionGroup 来自 react-transition-group。

尝试通过运行npm uninstall react-addons-css-transition-group 卸载您当前的软件包。然后安装正确的包：

npm i react-transition-group

在必要时更改您的导入并将您的CSSTransitionGroup 包装为<TransitionGroup>。试试看。

你也可以通过这个（在 react-transition-group 的 github 页面上找到）migration guide 来帮助你。

希望这会有所帮助。

Answer 2

包已被删除。

首先，这里是关于npm包中react-addons-css-transition-group的介绍。

react-addons-css-transition-group 此包中的代码已移动。我们建议您改用 react-transition-group 中的 CSSTransitionGroup。

所以，react-addons-css-transition-group 包现在不推荐使用，推荐使用 react-transition-group。

---

页面可能会被压碎。

其次，Object.keys(idToVarStates).map会渲染太多TransitionGroup，导致页面崩溃。

---

将 CSSTransition 更改为此。

<TransitionGroup className="todo-list">
                {idToVarStates.map(({ id, text }) => (
                    <CSSTransition
                        key={id}
                        timeout={500}
                        classNames="fade"
                    >
                        <VariableDefinition text={text} key={id} filter={this.props.filter} {...this.props}/>
                    </CSSTransition>
                ))}
            </TransitionGroup>

---

工作代码

我为 react-transition-group 创建了一个示例。结果如下。

工作代码在这里：https://codesandbox.io/s/github/stackOverflow166/variable