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

IT技术 javascript css reactjs
2021-04-29 17:32:55

当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;
}

当我使用 adelay调用 show 时function(use setTimeout)，css 动画会起作用。此时(componentDidMount)，真正的 DOM 被渲染了吗？

3个回答

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

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

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

和：

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

我见过这个问题，我已经找到了几个解决方案：
一，我喜欢更多的是包装this.show()的requestAnimationFrame（这是轻轻超时的版本）

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

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

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

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

componentDidMount: function() {
    $(document).ready(function() {
        this.show();
    });
}
其它你可能感兴趣的问题
上一篇使用 react-material-ui 关闭全屏对话框后 OnClick 侦听器不起作用 下一篇找不到module：错误：无法解析“@material-ui/core/styles”（部署到 heroku 时）