ReactCSSTransitionGroup不应用类

Question

在修改了来自这个早期的问题的呈现之后，我现在遇到了一个问题，在这个问题中，转换组的超时被尊重，但是没有类被添加到子元素中。我要进口react-addons-css-transition-group.

以下是渲染：

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

Answer 1

基于您的代码片段，我创建了一个JS小提琴

转换类被正确地应用。为了更好地调试，我稍微增加了过渡超时。

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

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