ReactJS: Css Transition Not Working In ComponentDidMount

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({ com

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

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

Solution 3:

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

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