当状态改变时在React.js中对组件进行动画处理

Question

当存储在状态中的数据值改变时，我想在HTML元素上制作一个小动画。如何实现？

如何在componentWillUpdate中向组件添加CSS类并在componentDidUpdate中删除它？我没有看到任何参考任何HTML元素的内容。

- sunpietro

---

我建议阅读https://facebook.github.io/react/docs/animation.html。 - Felix Kling

或者你也可以简单地搜索：http://stackoverflow.com/search?q=%5Breactjs%5D+animation - Felix Kling

我尝试了，但是我使用了错误的关键词。我只得到了几个结果。 - sunpietro

Answer 1

如果你需要给组件添加一个类：

React.findDOMNode(this).classList.add("classname");

要删除：

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

如果你想在 componentWillUpdate 中添加一个类，并在 componentDidUpdate 中删除它，你需要使用像 setTimeout 这样的东西来注意到变化。例如：

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

- Hicham El Hammouchi

---

请注意，React.findDOMNode已被弃用。请改用来自require('react-dom')的ReactDOM.findDOMNode。 - Spyros

你可能想在 componentWillUnmount 中清除那个超时。 - IliasT