Animate.css 转换不会为每个元素重复

Question

**我在 React 项目中使用 Animate css。我想为每个渲染重复相同的动画。现在我只看到 backgroundColor 变化，而不是动画。（我不想=>动画迭代计数：无限；） **

<div
  id="left"
  style={{ backgroundColor: this.props.backColor }}
  className={
  "animated slideInUp leftSide d-flex justify-content-center align-items-center "}
>

Answer 1

您可以将 key={this.props.backColor} 属性添加到 div 以强制重新渲染整个组件。

<div
  id="left"
  style={{ backgroundColor: this.props.backColor }}
  key={this.props.backColor}
  className={
  "animated slideInUp leftSide d-flex justify-content-center align-items-center "}
>

更新：如果您真的想要重新渲染组件，您可以使用 this.props.backColor 代替 key 每次都是真正新的东西，比如 Date.now()，但效率不高，三思而后行。

function start() {
  const h = React.createElement;

  class Div extends React.PureComponent {
    render() {
      return h('div', {
        id: "left",
        key: this.props.backColor,
        style: {
          backgroundColor: this.props.backColor
        },
        className: "animated slideInUp leftSide d-flex justify-content-center align-items-center",
      }, this.props.children)
    }
  }

  function SelectBG(props) {
    return h(
      'div', {}, [
        h('input', {
          key: 'a',
          type: 'button',
          name: 'bg',
          value: 'silver',
          onClick: props.onChange
        }),
        h('input', {
          key: 'b',
          type: 'button',
          name: 'bg',
          value: 'green',
          onClick: props.onChange
        }),
      ]

    );
  }

  function App(props) {
    const [bg, setBG] = React.useState('silver');
    const onChangeBG = React.useCallback((ev) => {
      const bg = ev.target.value;
      setBG(bg);
    }, []);

    return h('section', {}, [
      h(SelectBG, {
        onChange: onChangeBG
      }),
      h(Div, {
        backColor: bg
      }, 'animated div')
    ]);
  }

  ReactDOM.render(h(App), window.app);
}

window.onload = start;

<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>


<div id="app" />

Animate.css 转换不会为每个元素重复

Animate.css transictions don't repeat it for each element

javascript

reactjs

animate.css