2015-06-10 28 views
5

Sto provando a creare una piccola animazione sull'elemento HTML quando i valori dei dati sono memorizzati in stato di modifica. Come può farlo?Animare il componente quando si modificano le condizioni in React.js

Come è possibile aggiungere una classe CSS al componente in componentWillUpdate e rimuoverlo in componentDidUpdate? Non vedo alcun riferimento a nessun elemento HTML lì.

+0

vi consiglio di leggere https://facebook.github.io/react/docs/animation.html –

+0

o si potrebbe anche semplicemente cercare: http://stackoverflow.com/search?q= % 5Breactjs% 5D + animazione –

+0

Ho provato, ma ho usato parole chiave sbagliate. Ho solo un paio di risultati. – sunpietro

risposta

3

Se è necessario aggiungere una classe a un componente: React.findDOMNode(this).classList.add("classname");

Per rimuovere: React.findDOMNode(this).classList.remove("classname");

Se stai cercando di aggiungere una classe in componentWillUpdate e rimuoverlo in componentDidUpdate, avresti bisogno usare qualcosa come un setTimeout per notare un cambiamento. Per esempio:

componentWillUpdate: function() { 
    React.findDOMNode(this).classList.add("class1", "class2"); 
}, 
componentDidUpdate: function() { 
    var el = React.findDOMNode(this); 
    setTimeout(function(){ 
     el.classList.remove("class1"); 
    }, 1000); 
} 
+0

Ricordare che React.findDOMNode è deprecato. Utilizzare invece ReactDOM.findDOMNode da require ('react-dom'). – Spyros

+0

Probabilmente vorrai cancellare quel timeout in 'componentWillUnmount'. – IliasT

Problemi correlati