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