React 动画同步答案

【问题标题】：React animation synchronizationReact 动画同步
【发布时间】：2016-07-25 10:01:19
【问题描述】：

我有以下 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 来控制显示的字符串和组件的可见性。

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

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

【问题讨论】：

我相信最好的方法是监听“animationend”事件。这是更新的小提琴jsfiddle.net/69z2wepo/50313
有趣。你从哪里得到animationend 事件？你想写一个答案吗？
这只是 css3-animations 规范的一部分。我的意思没有什么特别的，只是一个本地事件。如有必要，请注意为其添加供应商前缀。

标签： javascript css reactjs animate.css

【解决方案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方法来改变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

【讨论】：

我喜欢这个想法，如果你写了一个正确的答案（只包括相关代码，解释你做了什么改变）我会接受它。

【解决方案2】：

我的解决方案是使用ref 来“手动”将组件的文本和可见性与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.

【讨论】：