Component animation on state change in React.js

Question

I am trying to make a little animation on an HTML element when data values ​​stored in state change. How can this be achieved?

How to add a CSS class to a component in componentWillUpdate and remove it in componentDidUpdate ? I do not see links to any HTML element.

Answer 1

If you need to add a class to the component: React.findDOMNode(this).classList.add("classname");

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

If you are trying to add a class to componentWillUpdate and delete it in componentDidUpdate , you need to use something like setTimeout to notice the change. For instance:

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