javascript - 在 React 转换之前，Div 已经填补了它的位置

Question

我正在动态渲染和动画 div。它工作得很好，但它有点“弹出”另一个 div 的位置，并且不能顺利地将它向下推或拉回来。

所以基本上我有一个按钮，下面有两个 div。在您单击按钮之前，不会呈现第一个 div。然后第二个 div 立即向下推并为 div 清除空间。当您再次点击该按钮时，它会等待另一个 div 呈现出屏幕并突然弹回。

问题是我不能只拉起第二个 div，因为当第一个 div 没有被渲染时，它只会掩盖我的按钮，我不能在第二个 div 进入时将其动画化，否则它将是低。所以我有点卡在这里。

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false,
      shouldRender: false,
      class: ''
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (!prevState.show && this.state.show) {
      this.setState({
        shouldRender: true
      })
      setTimeout(() => {
        this.setState({ class: 'showDiv' })
      }, 0)
    }
    if (prevState.show && !this.state.show) {
      setTimeout(() => {
        this.setState({
          shouldRender: false
        })
      }, 1000)
      this.setState({ class: '' })
    }
  }

  render() {
    return (
      <div>
      
        <button
          style={{
            display: 'block',
            border: 'none',
            padding: '20px',
            background: 'blue',
            color: 'white',
            fontSize: '20px',
            margin: '10px',
            cursor: 'pointer'
          }}
          onClick={() => this.setState({ show: !this.state.show }) }
        >
          Toggle Div
        </button>

        {this.state.shouldRender && <div className={`baseDiv ${this.state.class}`} />}

        <div
          style={{
            width: '200px',
            height: '200px',
            background: '#999',
            margin: '5px'
          }}
        />
        
      </div>
     )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

.baseDiv {
  width: 200px;
  height: 200px;
  background: #333;
  margin: 5px;
  transition: all 1s ease;
  transform: translateY(-200%);
}
.showDiv {
  transform: translateY(0%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

标签： javascriptcssreactjs

Answer 1

您还应该同时为第二个 div 设置动画。我也使用同一个showDiv类来触发 secondDiv 上的动画。另一个大问题是，一旦第一个 div 得到渲染，它的整个高度就会被计算（200px），这会立即将 secondDiv 向下推。相反，给你的 firstDiv 一个position: absolute，以便它的高度在添加到 dom 时不会影响 secondDiv：

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false,
      shouldRender: false,
      class: ''
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (!prevState.show && this.state.show) {
      this.setState({
        shouldRender: true
      })
      setTimeout(() => {
        this.setState({ class: 'showDiv' })
      }, 0)
    }
    if (prevState.show && !this.state.show) {
      setTimeout(() => {
        this.setState({
          shouldRender: false
        })
      }, 1000)
      this.setState({ class: '' })
    }
  }

  render() {
    return (
      <div style={{ position: 'relative' }}>
      
        <button
          style={{
            display: 'block',
            border: 'none',
            padding: '20px',
            background: 'blue',
            color: 'white',
            fontSize: '20px',
            margin: '10px',
            cursor: 'pointer'
          }}
          onClick={() => this.setState({ show: !this.state.show }) }
        >
          Toggle Div
        </button>

        {this.state.shouldRender && <div className={`baseDiv ${this.state.class}`} />}

        <div
          className={`secondDiv ${this.state.class}`}
          style={{
            width: '200px',
            height: '200px',
            background: '#999',
            margin: '5px'
          }}
        />
        
      </div>
     )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

.baseDiv {
  width: 200px;
  height: 200px;
  background: #333;
  margin: 5px;
  transition: all 1s ease;
  transform: translateY(-200%);
  position: absolute;
  top: 70px;
  left: 0;
}
.showDiv {
  transform: translateY(0%);
}

.secondDiv {
  transition: all 1s ease;
  transform: translateY(0%);
}
.secondDiv.showDiv {
  transform: translateY(105%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>