在 React 中每次点击时触发 Animate.css 动画

Question

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

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

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

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

我通过在 onClick 函数的 setState 中添加一个动画，然后在 onAnimationStart 中添加另一个动画，设法让它以一种有点老套的方式工作。

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

最小可行示例：

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>

Answer 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>

在 React 中每次点击时触发 Animate.css 动画

Trigger Animate.css animation on each click in React

reactjs

animate.css