Animate.css transictions 不要為每個元素重復它

Question

**我在 React 項目中使用 Animate css。 我想為每個渲染重復相同的 animation。 現在我只看到背景顏色的變化，而不是 animation。 （我不想要=>動畫迭代計數：無限；）**

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