javascript - react 动画同步

Question

我有以下 React 组件:

var Hello = React.createClass({

    getInitialState: function() {
        return {
            visibility: 'visible'
        };
    },

    toggleState: function() {
        if (this.state.visibility === 'visible') {
            this.setState({visibility: 'hidden'});
        } else {
            this.setState({visibility: 'visible'});
        }
    },

    componentDidMount: function () {
        var self = this;
        setInterval(function() {
            self.toggleState();
        }, 5000);
    },

    render: function() {
        return <div className={"animated " + (this.state.visibility === 'visible' ? 'fadeIn' : 'fadeOut')}>{this.state.visibility}</div>;
    }

});

参见 fiddle here .

基本上我使用 animate.css 控制显示的字符串和组件可见性通过 state 属性 visibility。

副作用是，当组件淡出时，它显示“隐藏”，然后开始隐藏。我想更早地开始动画，只有在它完成后，才更改字符串，这样“隐藏”就不会真正显示出来。

实现这种同步的最佳方法是什么？

Answer 1

隐藏动画完成后更改状态的最佳方法是监听 animationend 事件。由于仅当组件具有 hidden 可见性状态时才需要更改文本状态，因此应在隐藏动画完成后立即更改它，并在开始动画时更改回 visible。

用text扩展state:

getInitialState: function() {
  return {
    visibility: 'visible',
    text: 'visible'
  }
}

所以你应该在componentDidMount中添加监听器:

componentDidMount: function() {
  this.refs.animated.addEventListener('animationend', this.toggleText); // add ref="animated" element
  // rest code
}

添加toggleText方法来改变动画结束时的文本状态:

toggleText: function() {
  if (this.state.visibility === 'hidden') { // change only on hidden state
    this.setState({
      text: 'hidden'
    });
  }

并在显示动画开始时将文本更改为 visible，因此:

toggleState: function() {
  if (this.state.visibility === 'visible') {
    this.setState({visibility: 'hidden'}); // text should not be changed immediately
  } else {
    this.setState({visibility: 'visible', text: 'visible'}); // change the text on show animation start
  }

此处已完成 fiddle