ReactJS：css 转换在 componentDidMount 中不起作用

当。。。的时候EffectBox组件已安装，我想添加一个show class到这个组件。但是 css 过渡不起作用。

这是js代码：

 var EffectBox = React.createClass({
   componentDidMount: function () {
     this.show();
     // setTimeout(this.show, 100);
    },

    show: function () {
      $(React.findDOMNode(this)).addClass('show');
    },

    render: function () {
      return (
        <div className="effect-box" >
        <div className="header"></div>
        <div className="content">
        ...
       )
    }
  });

CSS如下：

.effect-box {  
  transform: translate3d(0, -100%, 0);
  transition: all .4s;
}

.show {
  transform: none;
}

当我使用delay呼叫显示function(use setTimeout)，CSS动画有效。在此刻(componentDidMount)，真实的 DOM 是否被渲染了？

我在自己的 React 项目上尝试了以下代码，看起来效果很好：

  componentDidMount: function() {
    this.show();
  },

  show: function() {
    React.findDOMNode(this).classList.add('show');
  }

and:

.show {
  transition: transform 400ms;
  transform: translate3d(-200px, -200px, 0px);
}