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 此软件包中的代码已移动。我们建议您改用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

Answer 2

简单的答案。程序包已移动。根据{{1}}的npm页面。

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

尝试通过运行react-addons-css-transition-group卸载当前软件包。然后使用以下命令安装正确的软件包：

npm uninstall react-addons-css-transition-group

在必要时更改导入，并用npm i react-transition-group包装CSSTransitionGroup。试试看

您也可以逐步解决此问题（位于react-transition-group的github页上）migration guide，以帮助您。

希望这会有所帮助。

Answer 3

我编辑了您的代码，并替换为我的代码，并在我的代码上正常工作。

import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' ; 

class VariableDefinitions extends React.Component {

  render() {
    const { idToVarStates } = this.props;

    const varHtmlList = Object.keys(idToVarStates).map(id => {
      return (
        <ReactCSSTransitionGroup
        transitionEnterTimeout={1000} 
        transitionLeaveTimeout={1000}
        transitionName="fade"
        key={id}
         >
            {React.cloneElement(this.props.children, {key: page})}
        <ReactCSSTransitionGroup>
      );
    })
}}

这是style.css

.fade-enter {
  opacity: 0.01;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.fade-leave {
  opacity: 1;
}
.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

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

3 个答案:

该软件包已被删除。

页面可能被压碎。

工作代码