在React中，如何立即触发动画，而不是让它们排队

In React, how can I trigger animations immediately instead of having them queue up?

本文关键字：排队 React 何立即 动画      更新时间：2023-09-26

试试小提琴：http://jsfiddle.net/zhjk39qe/2/-单击按钮使方框淡入/淡出。

当我连续快速点击两次按钮时，我预计盒子会在一瞬间开始淡出，但会立即淡出。相反，在这把小提琴中，盒子必须一直淡出，然后会一直淡出。（第二次点击是排队的，感觉不快。糟糕的用户体验。）

有没有办法立即强制进行第二次转换？

（一直在这里挖，但不知道该去哪里：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'));
相关文章：