javascript - 如何为 React Array.map() 迭代应用 CSS 动画？

Question

例如，我有这个 CSS 代码来处理简单的动画:

我的 React 组件渲染一个简单的列表并使用随机值更改列表:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      items: ["Alex", "David", "John"]
    };
  }

  change() {
    this.setState({
      items: [Math.random(), Math.random(), Math.random()]
    });
  }

  render() {

    return (
      <div>
        {this.state.items.map((item, index) => (
          <p className="flasher" key={index}>
            {item}
          </p>
        ))}
        <button onClick={this.change.bind(this)}>Change</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("react"));

@keyframes flasher {
  from {
    background: red;
  }
  to {
    background: green;
  }
}

.flasher {
  display: block;
  animation: flasher 0.5s;
  background: red;
  color: white;
}

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

<div id="react" />

点击“更改”按钮后，我有一个渲染到浏览器控制台，但 CSS 动画在这种情况下不起作用......并且只有我第一次渲染该 CSS 动画。

那么，如何将 CSS 动画应用于每个更改？

显然，此代码仅更改 innerText 而不会重新渲染元素以应用该 CSS 效果。你知道，我需要这种闪光效果来实现套接字服务。该套接字返回更改，我想应用 flasher 来为用户创建一个简单的关注。

谢谢

Answer 1

如果你想重置组件和动画。你可以用来让 React 重新安装它的技巧之一。重新安装的最简单方法是在每次单击按钮后更改组件的键。

例如:

<p className="flasher" key={index}>

使用该元素作为键:

 <p className="flasher" key={item}>

它会成功的。 https://codesandbox.io/s/hopeful-hertz-rpqv2