CODEWITHSUNDEEP
reactjs
motleydev
motleydev

Reputation: 3447

ReactCSSTransitionGroup is not applying classes

After modifying my render from this earlier issue, I now have a problem where the transition group's timeouts are respected but no classes are getting added to the children elements. I am importing react-addons-css-transition-group.

Here's the render:

render () {
  return (
    <section className="SocialBlock" onMouseOver={this.showIcons} onMouseLeave={this.hideIcons}>

    <div className="socialAccounts">
    <ReactCSSTransitionGroup
    transitionName="socialIcons"
    transitionEnterTimeout={500}
    transitionLeaveTimeout={300}
    transitionAppear={true}
    transitionAppearTimeout={300}>

    {this.state.iconsAreVisible &&
      <div key="456">
      {socials.map((icon, index) => {
        return <div className={`icon icon-${index+1}`} key={index}><InlineSVG src={icon} /></div>
      })}
      </div>
    }
    {!this.state.iconsAreVisible &&
      <div key="123">
      <h3>Check out the social stuff!</h3>
      </div>
    }
    </ReactCSSTransitionGroup>

    </div>


    </section>
    );
}

Upvotes: 0

Views: 1618

Answers (1)

Richard Rutsche
Richard Rutsche

Reputation: 1206

Based on your code snippet I created a JS FIDDLE

The transition classes get applied correctly. I increased the transition timeouts a bit for better debugging

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var socials = ['https://raw.githubusercontent.com/isaacs/npm/master/html/npm-256-square.png', 'https://wasin.io/wp-content/uploads/2015/05/showimage.png'];

var Hello = React.createClass({
    getInitialState: function() {
    return {
        iconsAreVisible: false
    };
  },
  hideIcons: function() {
    this.setState({
        iconsAreVisible: false
    });
  },
  showIcons: function() {
    this.setState({
        iconsAreVisible: true
    });
  },
  render () {
    return (
      <section className="SocialBlock" onMouseOver={this.showIcons} onMouseLeave={this.hideIcons}>
        <div className="socialAccounts">
          <ReactCSSTransitionGroup
            transitionName="socialIcons"
            transitionEnterTimeout={1000}
            transitionLeaveTimeout={1000}
            transitionAppear={true}
            transitionAppearTimeout={300}>
              {this.state.iconsAreVisible &&
                <div key="456">
                  {socials.map((icon, index) => {
                    return <span className={'icon icon-'+index} 
                                key={index}>
                                <img src={icon} height="100"/>
                          </span>
                  })}
                </div>
              }
              {!this.state.iconsAreVisible &&
                <div key="123">
                <h3>Check out the social stuff!</h3>
                </div>
              }
          </ReactCSSTransitionGroup>
        </div>
     </section>
    );
  }
});

And the css:

.socialIcons-enter {
    opacity: 0.01;
}
.socialIcons-enter.socialIcons-enter-active {
  opacity: 1;
  transition: all 1000ms cubic-bezier(0.0,0.0,0.2,1);
}
.socialIcons-leave {
  opacity: 1;
}
.socialIcons-leave.socialIcons-leave-active {
    opacity: 0;
    transition: all 1000ms cubic-bezier(0.0,0.0,0.2,1);
}
.socialAccounts div {
  position: absolute;
}

Upvotes: 1

Related Questions