Animation 对组件中的元素设置动画

我想在不使用jQuery或其他类似库的情况下为组件中的某些元素设置动画。我已经运行了以下代码：

export default React.createClass({
    getInitialState() {
        return {
            women: {
                total: this.props.women.upvotes + this.props.women.downvotes,
                up_height: {
                    'height': 0
                },
                down_height: {
                    'height': 0
                }
            }
        };
    },

    componentDidMount: function() {
        this.setState({
            women: {
                up_height: {
                    'height': (this.props.women.upvotes / this.state.women.total) * 100 + '%'
                },
                down_height: {
                    'height': (this.props.women.downvotes / this.state.women.total) * 100 + '%'
                }
            }
        })
    },

    render() {
        return (
            <li className="block-element">
                <div className="upvotes">
                    <span className="women" style={this.state.women.up_height}>{this.props.women.upvotes}</span>
                    <span className="men">{this.props.men.upvotes}</span>
                </div>
            </li>
        )
    }
})

export default React.createClass({
getInitialState（）{
返回{
妇女：{
总计：this.props.women.upvows+this.props.women.downvows，
上升高度：{
“高度”：0
},
下降高度：{
“高度”：0
}
}
};
},
componentDidMount:function（）{
这是我的国家({
妇女：{
上升高度：{
“身高”：（this.props.women.upvoces/this.state.women.total）*100+'%
},
下降高度：{
“身高”：（this.props.women.downvoces/this.state.women.total）*100+'%
}
}
})
},
render（）{
返回(

{这个。道具。女人。投票}
{这个。道具。男人。投票}

)
}
})

因此，在

getInitialState

上，样式高度设置为0。当de

componentDidMount

将其设置为预期高度时。我确实通过CSS向元素添加了一个

转换

，但似乎什么都没有发生

---

我尝试在

componentDidMount

中的

setState

周围添加一个

setTimeout

，但这破坏了

setState

。有什么头绪吗？如何做到这一点？

另一种可能是使用中使用的

requestAnimationFrame

如果您不介意使用专门为React实现此功能的库，请不要混淆React。npm上的当前版本（日期：9.4.16）似乎不支持CommonJS，但github上的版本更为最新。例如：

npm install react react-dom http://github.com/pleasetrythisathome/react.animate/tarball/master

test.js：

React = require('react')
ReactDOM = require('react-dom')
require('@pleasetrythisathome/react.animate')

SomeComponent = React.createClass({
  mixins: [React.Animate],
  getInitialState: function () {return {bananas: 0}},
  componentDidMount: function () {
    this.animate({bananas: 100}, 1000, () => {console.log('Finish')})
  },
  render: function () {return React.DOM.span({}, this.state.bananas)},
})

ReactDOM.render(React.createElement(SomeComponent), document.getElementById('apple'))

然后，例如使用browserify

browserify test.js > apple.js

test.html：

<div id="apple"></div>
<script src="apple.js"></script>

JSFiddle：

---

使用setTimeout应该会让您走上正确的道路。确保将回调参数setTimeout绑定到正确的上下文！真他妈的蠢。忘记了。绑定（这个）。。谢谢你指出；）为什么不使用CSS动画？