ReactCSSTransitionGroup不应用类

时间:2016-05-20 05:51:02

标签: reactjs

this earlier issue修改渲染后,我现在遇到一个问题,即转换组的超时被尊重但没有类添加到子元素。我正在导入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>
    );
}

1 个答案:

答案 0 :(得分:1)

根据您的代码段,我创建了JS FIDDLE

正确应用过渡类。为了更好的调试,我增加了一些转换超时

<script language="javascript" type="text/javascript">
function myjavascriptfn() 
  {
    var strValue= "test";
    return strValue
  }

和css:

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