如何在每次反应组件重新渲染时触发 CSS 动画

Question

我想在每次由于 prop 更改而重新渲染时在 react 组件上播放动画：

反应：

function Card({ cardText }) {
  return <div className="roll-out">{cardText}<div/>
}

所以我做了css：

@keyframes rollout {
  0% { transform: translateY(-100px); }
  100% { transform: none; }
}

.roll-out {
  animation: rollout 0.4s;
}

但是，动画仅在初始渲染时播放一次。由于cardText 的变化，我想在每次<Card /> 重新渲染时播放它。我怎样才能实现它？

Answer 1

像这样添加一个键：

function Card({ cardText }) {
  return <div key={cardText} className="roll-out">{cardText}<div/>
}

在您的代码中，当 div 重新呈现时，react 只会更改其内部文本。添加一个 key 会让 react 在 key 改变时认为它是一个不同的 div，所以它会卸载它并重新安装。

Answer 2

对不起，现在我完全得到了你的问题，要强制元素重新渲染，你可以简单地更改它的 key 属性，这将触发渲染，使反应认为它是另一个元素

参考这个答案：https://stackoverflow.com/a/35004739

function Card({
  cardText
}) {
  return <div className = "roll-out" > {
    cardText
  } </div>
}

ReactDOM.render( (<Card cardText="Hey There" />) , document.getElementById('root'))

@keyframes rollout {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}

.roll-out {
  animation: .4s rollout;
}

<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="root"></div>

Answer 3

这里的技巧是在您的卡片元素上使用随机的key 字段。 React 的 diffing 算法将具有相同 key 的元素视为相同，因此随机化 key 将使 react 将每个重新渲染的元素视为新元素，因此将从 DOM 中删除旧元素并添加一个全新的元素

这是一个使用 @aXuser264 的代码作为基础的演示。

class Card extends React.Component{
   onClick = ()=>this.forceUpdate();
   render(){
       return <div key={Math.random()} className="roll-out" onClick={this.onClick}> {
    this.props.cardText
     } </div>
  }
}

ReactDOM.render( (<Card cardText="Hey There" />) , document.getElementById('root'))

@keyframes rollout {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}

.roll-out {
  animation: .4s rollout;
}

<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="root"></div>