为什么 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

包已删除。

首先介绍npm包中react-addons-css-transition-group

react-addons-css-transition-group The code in this package has moved. We recommend you to use CSSTransitionGroup from react-transition-group instead.

所以不推荐使用react-addons-css-transition-group包now.It推荐使用react-transition-group

页面可能被压碎了。

其次，Object.keys(idToVarStates).map会渲染太多TransitionGroup.And导致页面被压垮

将 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.Here就是结果。

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

Answer 2

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

The code in this package has moved. We recommend you to use CSSTransitionGroup from react-transition-group instead.

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

npm i react-transition-group

必要时更改您的导入，并将您的 CSSTransitionGroup 换成 <TransitionGroup>。试试看。

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

希望这对您有所帮助。

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

why is react-addons-css-transition-group not working here?

javascript

jquery

reactjs

react-transition-group

包已删除。

页面可能被压碎了。

工作代码