在 React 中每次单击时触发 Animate.css 动画答案

【问题标题】：Trigger Animate.css animation on each click in React在 React 中每次单击时触发 Animate.css 动画
【发布时间】：2020-04-10 10:07:33
【问题描述】：

我无法在每次点击时触发动画 - 它只会在页面加载时触发一次。

我找到的解决方案是在我想要动画的文本中添加一个 Math.random 键，但是一旦我添加了新的处理函数，它就不起作用了，因为它会在任何函数触发时触发动画。

另外，我读到在 React 中操作 DOM 不是一个好习惯。

我知道我可以使用合成事件 onAnimationEnd，但我想在每次点击时再次触发动画，而不是等待它结束。

通过在 onClick 函数的 setState 中添加一个动画，然后在 onAnimationStart 中添加一个不同的动画，我设法让它以一种 hacky 的方式工作。

有什么更好的方法来解决这个问题，最好是遵循最佳实践的方法？

最小的可行示例：

class App extends React.Component {
  state = {
    quotes: [{quote: "a", author: 1},
            {quote: "b", author: 2},
            {quote: "c", author: 3}],
    quote: {quote: "a", author: 1}
  }

  handleClick = () => {
    this.setState({
      quote: this.state.quotes[Math.floor(Math.random()*3)]
    });
  }
  
  render() {

    // assign random quote
    const quote = this.state.quotes.length ? (this.state.quote.quote) : ("Wait o");

    // assign author
    const author = this.state.quotes.length ? (this.state.quote.author) : ("");
   
    return(
      <div className="App">
        <p className="animated jackInTheBox">
          {quote}
        </p>
        <p className="animated jackInTheBox">
          {author}
        </p>
        <button id="new-quote" onClick={this.handleClick}>
          New Quote
        </button>
      </div>
     )
   }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<div id="root"></div>

【问题讨论】：

标签： reactjs animate.css

【解决方案1】：

class App extends React.Component {
  state = {
   classes:"animated jackInTheBox",
    quotes: [{quote: "a", author: 1},
            {quote: "b", author: 2},
            {quote: "c", author: 3}],
    quote: {quote: "a", author: 1}
  }

  handleClick = () => {
    this.setState({
      quote: this.state.quotes[Math.floor(Math.random()*3)],
      classes:"hidden"
    }, () => {
         setTimeout(() => this.setState({classes:"animated jackInTheBox"}),100)
      });
  }
  
  render() {

    // assign random quote
    const quote = this.state.quotes.length ? (this.state.quote.quote) : ("Wait o");

    // assign author
    const author = this.state.quotes.length ? (this.state.quote.author) : ("");
   
    return(
     
      <div className="App">
        <p className={this.state.classes}>
          {quote}
        </p>
        <p className={this.state.classes}>
          {author}
        </p>
        <button id="new-quote" onClick={this.handleClick}>
          New Quote
        </button>
      </div>
     )
   }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<style>.hidden{opacity:0}</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<div id="root"></div>

【讨论】：