从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>
);
}
答案 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>
);
}
});