如何在反应js中重新运行css3动画

Question

我需要在 ajax 成功后显示几秒钟的快速闪烁消息。消息应在 1/2 秒后自动隐藏。

由于 reactjs 不促进 dom 操作，我想使用 css3 动画来实现。

这是我准备的简单演示，

当您第一次单击该按钮时，它会显示消息，但在随后的单击中它不会执行任何操作。

class Test extends React.Component {
  state = {
    show: false
  }
  showFlashMessage() {
    this.setState({
      show: true
    })
  }
  render() {
    return ( <
      div >
      <
      div className = {
        `message ${this.state.show ? "fadeOut": ""}`
      } > Hello < /div> <
      button id = "but"
      onClick = {
        this.showFlashMessage.bind(this)
      } > Click Me < /button> <
      /div>
    )
  }
}

ReactDOM.render( <
  Test / > ,
  document.getElementById('container')
);

@keyframes FadeAnimation {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.fadeOut {
  animation: FadeAnimation 1s ease-in .4s forwards;
}

.message {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JS 小提琴：http://jsfiddle.net/2kqv6fo7/9/

我不确定除了 css3 是否还有其他选择。

有什么建议吗？

Answer 1

正如我已经回复您的previous question 一样，请尝试处理状态更改。由于您在上一个问题中提到您使用的是toggle button，因此我使用了类似的checkbox，这将对您有所帮助。

我只在切换为checked 时才使代码工作，我假设您也需要在toggle off 上显示一些消息。通过在两个类之间切换来做同样的事情。并尽量避免内联函数绑定，因为它会在每次渲染时触发。而是使用构造函数，它只会在组件加载时执行一次。

class Test extends React.Component {
  constructor() {
    super();
    this.state = {
      show: false,
      showClass: undefined
    }
    
    this.showFlashMessage = (event) => this._showFlashMessage(event);
  }

  _showFlashMessage(event) {
    this.setState({
      show: !this.state.show,
      showClass: (!this.state.show ? "fadeOut": "fadeOut2")
    })
  }

  render() {
    return ( <
      div >
      <
      div className = {
        `message ${this.state.showClass}`
      } > Hello < /div>
      <button id ="but" onClick = {this.showFlashMessage} > Click Me </button><
      /div>
    )
  }
}

ReactDOM.render( <
  Test / > ,
  document.getElementById('container')
);

@keyframes FadeAnimation {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes FadeAnimation2 {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.fadeOut {
  opacity: 1;
  visibility: visible;
  animation: FadeAnimation 1s ease-in .2s forwards;
}

.fadeOut2 {
  opacity: 1;
  visibility: visible;
  animation: FadeAnimation2 1s ease-in .2s forwards;
}

.message {
  opacity: 0;
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Answer 2

您应该捕捉动画的结尾并在那里更改状态。

看这个：

How can I animate a react.js component onclick and detect the end of the animation