Question

安装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来调用show function(use setTimeout)时，css动画可以正常工作。此时(componentDidMount)，真正的DOM是否已呈现？

Answer 1

我在我自己的React项目中使用以下代码尝试了这个，这似乎工作正常：

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

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

和

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

Answer 2

我遇到了这个问题，我找到了几个解决方案：
我更喜欢的是将this.show()包裹在requestAnimationFrame中（这是暂停的温和版本。）

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

第二个非常粗鲁但是如果你不想使用任何类型的超时，你可以触发重新布局。它可能会损害应用程序性能。

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

Answer 3

而不是固定的超时，请尝试在componentDidMount中等待文档就绪：

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

ReactJS：css转换不在componentDidMount中工作

3 个答案: