css - 如何在每次 react 组件重新渲染时触发 CSS 动画

Question

我想在每次由于 Prop 更改而重新渲染时在 react 组件上播放动画:
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;
}

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

Answer 1

添加一个这样的键:

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

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