Animieren Komponente, wenn sich der Zustand ändert in React.js

Question

Ich versuche, eine kleine Animation auf HTML-Element zu machen, wenn Datenwerte im Zustand zu ändern. Wie kann das erreicht werden?

Wie kann ich eine CSS-Klasse zu Komponente in componentWillUpdate hinzufügen und in componentDidUpdate entfernen? Ich sehe dort keinen Verweis auf ein HTML-Element.

Answer 1

Wenn Sie eine Klasse zu einer Komponente hinzufügen müssen: React.findDOMNode(this).classList.add("classname");

zu entfernen: React.findDOMNode(this).classList.remove("classname");

Wenn Sie versuchen, eine Klasse in componentWillUpdate hinzufügen und entfernen es in componentDidUpdate, dann würden Sie brauchen etwas wie ein setTimeout zu verwenden, um eine Änderung zu bemerken. Zum Beispiel:

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