试试 fiddle :http://jsfiddle.net/zhjk39qe/2/ - 单击按钮使框淡入/淡出。
当我快速连续两次单击按钮时,我希望框开始淡出一瞬间但立即淡入。相反,在这个 fiddle 中,框必须淡出一直 然后将一直淡入。 (第二次点击排队,感觉不爽,用户体验差。)
有没有办法立即强制执行第二次转换?
(一直在这里挖掘但不确定去哪里:https://github.com/facebook/react/tree/master/src/addons/transitions)
JS在这里:
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Hello = React.createClass({
getInitialState: function() {
return {on: true};
},
onClick: function() {
this.setState({on: !this.state.on});
},
render: function() {
var k = this.state.on ? (<div> Hello {this.props.name} </div>) : "";
return <div>
<a href="#" onClick={this.onClick}> Click to toggle </a> <br/> <br/>
<ReactCSSTransitionGroup transitionName="example">
{k}
</ReactCSSTransitionGroup>
</div>;
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
最佳答案
我同意@Morhaus 的观点,我会根据需要切换 css 类。
这是一个工作示例。我知道这偏离了您最初的问题,但在这种情况下并不真正需要 ReactCSSTransitionGroup。
http://jsfiddle.net/joverall22/t7wok2zy/
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Hello = React.createClass({
getInitialState: function() {
return {on: true};
},
onClick: function() {
this.setState({on: !this.state.on});
},
render: function() {
var variant;
if(this.state.on){
variant = 'transition on';
} else {
variant = 'transition off';
}
var k = <div className={variant}> Hello {this.props.name} </div>
return <div>
<a href="#" onClick={this.onClick}> Click to toggle </a>
<br/> <br/>
<span>{k}</span>
</div>;
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
关于javascript - 在 React 中,如何立即触发动画而不是让它们排队?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29360813/