4 
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）组件时，我根本没有得到任何动画。这里有什么问题？如何解决这个问题？

4

2 回答 2

4

包已被删除。

首先，这里是关于 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

于 2018-12-10T13:01:50.113 回答
2

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

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

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

npm i react-transition-group

在必要时更改您的导入并CSSTransitionGroup用<TransitionGroup>. 试试看。

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

希望这可以帮助。

于 2018-12-11T00:13:40.183 回答