为什么react-addons-css-transition-group不能在这里工作？ [英] why is react-addons-css-transition-group not working here?

问题描述

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中的课程。

This is how I am using the transition group . Here are my classes in 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 数据，我根本没有得到任何动画。这有什么不对？怎么解决这个问题？

When I Add elements (VariableDefine) components by changing the idToVarStates data , i don't get any animation at all . What is wrong here ? how to fix this ?

推荐答案

该包已被删除。

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

The package has been deleted.

First,here is the introduction about react-addons-css-transition-group in npm package.

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

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。

So,the react-addons-css-transition-group package is not recommended to use now.It is recommended to use react-transition-group.

其次，Object.keys（idToVarStates）.map将渲染过多的TransitionGroup.And使页面粉碎。

Second,Object.keys(idToVarStates).map will render too many TransitionGroup.And make the page crush.

将CSSTransition更改为此。

Change the CSSTransition to this.

<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创建了一个例子。这就是结果。

---

Working code

I create an example for react-transition-group.Here is the result.

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

这篇关于为什么react-addons-css-transition-group不能在这里工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！