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>
      );
    })
}}

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;
}

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 ?

回答1:

The package has been deleted.

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

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

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

The page may be crushed.

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

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>

Working code

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

And the working code is in here: https://codesandbox.io/s/github/stackOverflow166/variable

回答2:

Simple answer. The package has been moved. According to the npm page for react-addons-css-transition-group.

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

Try uninstalling your current package by running npm uninstall react-addons-css-transition-group. Then install the correct package with:

npm i react-transition-group

Change your imports where necessary and wrap your CSSTransitionGroup with <TransitionGroup>. Try that.

You can also walkthrough this (found on the github page of react-transition-group) migration guide to help you along.

Hope this helps.

回答3:

I edited your code and replace with my code and working perfectly at my code.

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>
      );
    })
}}

Here is 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;
}

来源：https://stackoverflow.com/questions/53628895/why-is-react-addons-css-transition-group-not-working-here

标签

javascript

jquery

reactjs

react-transition-group