如何触发CSS动画上的每一次反应组件重新渲染

Question

每次因道具更改而重新渲染时，我都希望在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;
}

然而，动画只在初始渲染时播放一次。每次都想玩




Answer 1

对不起，现在我完全明白你的问题了，要强制元素重新渲染，你只需更改它的键道具，这将触发渲染，使它认为是另一个元素

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

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

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

css prettyprint-override">@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 2

这里的技巧是在卡片元素上使用随机的key字段。React的区分算法将具有相同键的元素视为相同的元素，因此随机化键将使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>

Answer 3

添加如下键：

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

在代码中，当div重新呈现时，react只更改其内部文本。添加密钥将使react在密钥更改时认为它是另一个div，因此它将卸载它并再次装载。