Try the fiddle: / - Click the button to make the box fade in/out.

When I click the button twice in quick succession, I expect the box to start fading out for a split second but immediately fade back in. Instead, in this fiddle, the box has to fade all the way out and then will fade all the way in. (The second click is queued up and doesn't feel snappy. Bad user experience.)

Is there any way to force the the second transition immediately?

(Been digging around in here but not sure where to go: )

JS is here:

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

Try the fiddle: http://jsfiddle/zhjk39qe/2/ - Click the button to make the box fade in/out.

When I click the button twice in quick succession, I expect the box to start fading out for a split second but immediately fade back in. Instead, in this fiddle, the box has to fade all the way out and then will fade all the way in. (The second click is queued up and doesn't feel snappy. Bad user experience.)

Is there any way to force the the second transition immediately?

(Been digging around in here but not sure where to go: https://github./facebook/react/tree/master/src/addons/transitions)

JS is here:

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

• javascript
• animation
• reactjs

• Why not use CSS transitions directly? ReactCSSTransitionGroup is intended for lists of items. – Alexandre Kirszenberg Commented Mar 31, 2015 at 8:27

1 Answer 1

I agree with @Morhaus I would just toggle the css class as needed.

here is a working example. I know this deviates from your original question but ReactCSSTransitionGroup is not really needed in this case.

http://jsfiddle/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'));