I'm trying to make a small animation on HTML element when data values stored in state change. How can achieve that?

How can I add a CSS class to ponent in ponentWillUpdate and remove it in ponentDidUpdate? I don't see any reference to any HTML element there.

I'm trying to make a small animation on HTML element when data values stored in state change. How can achieve that?

How can I add a CSS class to ponent in ponentWillUpdate and remove it in ponentDidUpdate? I don't see any reference to any HTML element there.

• javascript
• reactjs

Share Improve this question Follow edited Jun 11, 2015 at 8:42 Pete 58.5k2929 gold badges130130 silver badges184184 bronze badges asked Jun 10, 2015 at 18:40 sunpietrosunpietro 2,09844 gold badges2525 silver badges4444 bronze badges 3

• I remend to read facebook.github.io/react/docs/animation.html – Felix Kling Commented Jun 10, 2015 at 18:42
• Or you could also simply search: stackoverflow./search?q=%5Breactjs%5D+animation – Felix Kling Commented Jun 10, 2015 at 18:55
• I tried, but I used wrong keywords. I got only a couple of results. – sunpietro Commented Jun 10, 2015 at 21:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

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

If you're trying to add a class in ponentWillUpdate and remove it in ponentDidUpdate, you'd need to use something like a setTimeout to notice a change. For example:

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