Wie kann ich in React sofort Animationen auslösen, anstatt sie in die Warteschlange zu stellen?

Question

Probieren Sie die Geige: http://jsfiddle.net/zhjk39qe/2/ - Klicken Sie auf die Schaltfläche, um die Box ein-/auszublenden.

Wenn ich zweimal hintereinander auf die Schaltfläche klicke, erwarte ich, dass die Box für einen Sekundenbruchteil ausblendet, aber sofort wieder eingeblendet wird. Stattdessen muss die Box in dieser Geige ganz ausbleichen und dann wird den ganzen Weg in verblassen. (Der zweite Klick ist in der Warteschlange und fühlt sich nicht bissig an. Schlechte Benutzererfahrung.)

Gibt es eine Möglichkeit, den zweiten Übergang sofort zu erzwingen?

(gegraben hier in, aber nicht sicher, wohin sie gehen: https://github.com/facebook/react/tree/master/src/addons/transitions)

JS ist hier:

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

Answer 1

ich mit @Morhaus zustimmen würde ich die CSS-Klasse nur wechseln je nach Bedarf.

hier ist ein funktionierendes Beispiel. Ich weiß, dass dies von Ihrer ursprünglichen Frage abweicht, aber ReactCSSTransitionGroup wird in diesem Fall nicht wirklich benötigt.

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