ReactJS: css transition not working in componentDidMount

Question

When the EffectBox component is mounted, I want to add a show class to this component. But css transition doesn't work.

This is js code:

 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 as follow:

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

.show {
  transform: none;
}

And when I use a delay to call show function(use setTimeout) , the css animation works. At this point (componentDidMount) , did the real DOM get rendered?

Answer 1

I tried this on my own React project with following code, which seems to work just fine:

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

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

and:

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

Answer 2

I've met this problem and I've found a couple solutions:
One that I prefer more is to wrap this.show() in requestAnimationFrame (It's gently version of timeout.)

componentDidMount: function () {
     requestAnimationFrame(()=> {this.show();});  
 }

Second one is very rude but if you don't want to use any kind of timeout you can trigger relayout. It may harm application performance.

componentDidMount: function () {
  document.body.offsetHeight;
  this.show();  
}

Answer 3

Instead of a fixed timeout, try waiting for document ready inside componentDidMount:

componentDidMount: function() {
    $(document).ready(function() {
        this.show();
    });
}