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>;
    }

});

查看小提琴here。

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

副作用是，当组件淡出时，它会显示“隐藏”，然后开始隐藏。我想早点开始动画，只有在完成动画后，才更改字符串，以便“隐藏”永远不会实际显示。

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

Answer 1

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

使用state

扩展text

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

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

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

添加toggleText方法以更改animationend上的文本状态：

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

Answer 2

我的解决方案是使用ref来＆＃34;手动＆＃34;使用setTimeout：

同步组件的文本和可见性

render: function() {
  return <div ref="hello">visible</div>;
}

componentWillUpdate: function(next_props, next_state) {
  var self = this;
  if (next_state.visibility === 'visible') {
    this.refs.hello.className = 'animated fadeIn';
    this.refs.hello.innerHTML = 'visible';
  } else {
    this.refs.hello.className = 'animated fadeOut';
    setTimeout(function(){
      self.refs.hello.innerHTML = 'hidden';
    }, 1000);
  }
},

小提琴here。

反应动画同步

2 个答案: