질문

CSS :

.roll-out {
  @keyframes rollout {
    0% { transform: translateY(-100px); }
    100% { transform: translateY(0); }
  }
  animation: rollout 0.4s;
}

반응 :

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

이 "롤아웃"애니메이션은 초기 렌더링시 한 번만 재생됩니다. cardText 변경으로 인해 < Card / > 가 다시 렌더링 될 때마다 재생하고 싶습니다. 라이브러리를 사용하지 않고 어떻게 할 수 있습니까?

답변1

다음과 같은 키를 추가하십시오.

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

코드에서 div가 다시 렌더링되면 react는 내부 텍스트 만 변경합니다. 키를 추가하면 키가 변경 될 때 반응이 다른 div라고 생각하게되므로 마운트를 해제하고 다시 마운트합니다.

답변2

여기서 트릭은 카드 요소에 임의의 key 필드를 사용하는 것입니다. React의 diffing 알고리즘은 동일한 키를 가진 요소를 동일한 것으로 간주하므로 키를 무작위로 지정하면 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>

Expand snippet

답변3

죄송합니다. 이제 완전히 질문을 받았습니다. 요소를 다시 렌더링 하도록 강제하려면 key prop을 변경하여 다른 요소를 생각하게 만드는 반응을 트리거 할 수 있습니다.

이 답변을 참조하세요. 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>