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

问题描述

例如，我有这个 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 为用户创建一个简单的注意力。

谢谢

标签： javascripthtmlcssreactjs

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

例如，改为：

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

使用项目作为键：

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

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

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

问题描述

解决方案

推荐阅读