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) ponents by changing the idToVarStates data , i don't get any animation at all . What is wrong here ? how to fix this ?

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) ponents by changing the idToVarStates data , i don't get any animation at all . What is wrong here ? how to fix this ?

• javascript
• jquery
• reactjs
• react-transition-group

• What do you get in this.props;? – Just code Commented Dec 10, 2018 at 7:51

2 Answers 2

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 remend you to use CSSTransitionGroup from react-transition-group instead.

So,the react-addons-css-transition-group package is not remended to use now.It is remended 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

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 remend 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.