Par exemple, j'ai ce code CSS pour gérer une animation simple :

Et mon composant React pour afficher une liste simple et modifier la liste avec des valeurs aléatoires :

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      items: ["Alex", "David", "John"]
    };
  }

  change() {
    this.setState({
      items: [Math.random(), Math.random(), Math.random()]
    });
  }

  render() {

    return (
      <div>
        {this.state.items.map((item, index) => (
          <p className="flasher" key={index}>
            {item}
          </p>
        ))}
        <button onClick={this.change.bind(this)}>Change</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("react"));
@keyframes flasher {
  from {
    background: red;
  }
  to {
    background: green;
  }
}

.flasher {
  display: block;
  animation: flasher 0.5s;
  background: red;
  color: white;
}
<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="react" />

Après avoir cliqué sur le bouton Modifier, j'ai un rendu dans la console du navigateur mais l'animation CSS ne fonctionne pas dans ce cas ... et seulement j'ai cette animation CSS pour le premier rendu.

Alors, comment puis-je appliquer une animation CSS à chaque modification ?

Apparemment, ce code ne modifie que innerText et ne restitue pas l'élément pour appliquer cet effet CSS. Vous savez, j'ai besoin de cet effet clignotant pour un service de socket. cette prise renvoie des modifications et je souhaite appliquer un clignotant pour créer une simple attention pour l'utilisateur.

Merci

3
Alex 11 févr. 2020 à 11:35

1 réponse

Meilleure réponse

Si vous souhaitez réinitialiser les composants et l'animation. L'une des astuces que vous pouvez utiliser pour que React le remonte. Le moyen le plus simple de remonter est de changer la clé d'un composant après chaque clic sur un bouton.

Par exemple à la place ceci :

<p className="flasher" key={index}>

Utiliser l'élément comme clé :

 <p className="flasher" key={item}>

Cela fera l'affaire. https://codesandbox.io/s/hopeful-hertz-rpqv2

2
Peter Ambruzs 11 févr. 2020 à 09:02