W React, w jaki sposób mogę natychmiast uruchamiać animacje zamiast ich kolejkowania?

Question

Wypróbuj skrzypce: http://jsfiddle.net/zhjk39qe/2/ - Kliknij przycisk, aby pole zniknęło/zniknęło.

Po dwukrotnym kliknięciu przycisku w krótkim odstępie czasu, oczekuję, że skrzynka zacznie gasnąć przez ułamek sekundy, ale natychmiast zaniknie. Zamiast tego, w tym skrzypce skrzynka musi zanikać do końca i następnie zniknie do końca w. (Drugie kliknięcie jest ustawione w kolejce i nie jest wrażliwe. Złe wrażenia użytkownika.)

Czy istnieje sposób na natychmiastowe wymuszenie drugiego przejścia?

(Been kopanie wokół tutaj, ale nie wiesz gdzie iść: https://github.com/facebook/react/tree/master/src/addons/transitions)

JS jest tutaj:

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

zgadzam się z @Morhaus Chciałbym po prostu przełączyć klasę css, ile potrzeba.

oto działający przykład. Wiem, że różni się to od pierwotnego pytania, ale ReactCSSTransitionGroup nie jest w tym przypadku potrzebna.

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