在React.js中状态发生变化时动画组件

Question

当我在状态中存储的数据值发生变化时，我正在尝试在HTML元素上制作一个小动画。怎么能实现呢？

如何在componentWillUpdate中为组件添加CSS类并在componentDidUpdate中将其删除？我没有看到任何HTML元素的引用。

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);
}