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

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

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 ?

What do you get in `this.props;`? – Just code Dec 10 '18 at 07:51 — Just code, Dec 10 '18 at 07:51

Root · Accepted Answer · 2018-12-10T14:02:44.820

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

Please answer this followup question . https://stackoverflow.com/questions/53790853/element-type-invalid-expected-string-in-react-transition-group?noredirect=1&lq=1 — Natesh bhat, Dec 15 '18 at 08:42

score 2 · Answer 2 · answered Dec 11 '18 at 00:13

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.

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

2 Answers2

The package has been deleted.

The page may be crushed.

Working code

Linked