ReactJS: css transition not working in componentDidMount
When a component is EffectBox
installed, I want to add show
class
to this component. But the css transition doesn't work.
This is the 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 follows:
.effect-box {
transform: translate3d(0, -100%, 0);
transition: all .4s;
}
.show {
transform: none;
}
And when I use delay
to call show the function(use setTimeout)
css animation works. So far (componentDidMount)
, has the real DOM done rendering?
source to share
I've tried this in my own React project with the following code, which seems to work pretty well:
componentDidMount: function() {
this.show();
},
show: function() {
React.findDOMNode(this).classList.add('show');
}
and
.show {
transition: transform 400ms;
transform: translate3d(-200px, -200px, 0px);
}
source to share
I ran into this problem and I found a couple of solutions:
What I prefer more is to wrap this.show()
in requestAnimationFrame
(this is a mildly timeout version.)
componentDidMount: function () {
requestAnimationFrame(()=> {this.show();});
}
Second, it's very rude, but if you don't want to use any kind of timeout, you can trigger a relay. This can damage the performance of applications.
componentDidMount: function () {
document.body.offsetHeight;
this.show();
}
source to share