Trong React, làm thế nào tôi có thể kích hoạt hình ảnh động ngay lập tức thay vì để chúng xếp hàng?

Question

Hãy thử câu đố: http://jsfiddle.net/zhjk39qe/2/ - Nhấp vào nút để làm cho hộp mờ dần vào/ra.

Khi tôi nhấp vào nút hai lần liên tiếp nhanh chóng, tôi hy vọng hộp sẽ bắt đầu mờ dần trong giây lát nhưng ngay lập tức bị mờ dần. Thay vào đó, hộp này phải mờ dần tất cả các cách ra và sau đó sẽ mờ dần tất cả các cách trong. (Nhấp chuột thứ hai được xếp hàng đợi và không cảm thấy linh hoạt. Trải nghiệm người dùng kém.)

Có cách nào để buộc chuyển tiếp thứ hai ngay lập tức không?

(Được đào xung quanh trong đây nhưng không chắc chắn nơi để đi: https://github.com/facebook/react/tree/master/src/addons/transitions)

JS là ở đây:

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

Tôi đồng ý với @Morhaus tôi sẽ chỉ chuyển lớp css khi cần thiết.

đây là ví dụ hoạt động. Tôi biết điều này lệch từ câu hỏi ban đầu của bạn nhưng ReactCSSTransitionGroup không thực sự cần thiết trong trường hợp này.

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