如何在反应中滑动或隐藏带有过渡的div？

Question

我正在尝试通过单击具有幻灯片效果的按钮来显示 div。当点击某物时，它将切换为显示或不可见的幻灯片效果。到目前为止，我已经通过这样做实现了这一点。

class App extends Component {
  constructor() {
   super();
   this.state = {
    myclass: '',
    }
 this.divclicked = this.divclicked.bind(this);
 }

 divclicked() {
  if (this.state.myclass === '') {
   this.setState({
    myclass: 'coolclass'
   })
  }
 else {
  this.setState({
    myclass: '',
  })
 }
}

render() {
 return (
  <div className="App">
    <div id="box" onClick={this.divclicked}>
    </div>
    <div id="seconddiv" className={this.state.myclass}>
     <p>help help</p>
     <p>help help</p>
     <p>help help</p>
     <p>help help</p>
     <p>help help</p>
    </div>
  </div>
  );
 }
}

export default App;

还有我的 CSS

#box {
 height: 50px;
 width: 50px;
 background-color: red
}

#seconddiv.coolclass{
 height:300px;
 background: purple;
}

#seconddiv {
 height: 0px;
 transition: 0.5s;
 overflow: hidden;
}

所以在这里，当点击 id 为“box”的红色框时，我给“seconddiv”一个类名，CSS 负责隐藏 div。问题是当我给出类名coolclass 时，我不想使用 px 但想使用百分比。所以目前，它是从 0px 到 300px。但我希望它从 0px 到 100%；我如何做到这一点。当我尝试将 100% 的高度放在 seconddiv 中时，幻灯片动画不起作用。

Answer 1

您可以将条件渲染（x && y）与一些缩放动画

结合起来

例子

const scaleAnimationIn = keyframes`
  0% {
    transform: scale(0, 1);
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(1, 1);
  }
`


const QuestionHeaderPausedText = styled.div`
   animation: ${scaleAnimationIn} 1s;
   animation-delay: 7s;
   animation-fill-mode: both;
`

在 return/render 方法中：

{isSomeConditionTrue && <QuestionHeaderPausedText>
   My text
</QuestionHeaderPausedText>}

此示例使用样式化组件，但该方法（缩放）适用于任何 css 解决方案。

Answer 2

您需要将初始高度设置为0%。您还需要将.App 的高度设置为100%，以便它拉伸窗口的整个高度。在这个例子中，我给了它一个 1200px 的静态高度，但这应该由 body 决定。

class App extends React.Component {
  constructor() {
   super();
   this.state = {
    myclass: '',
    }
 this.divclicked = this.divclicked.bind(this);
 }

 divclicked() {
  if (this.state.myclass === '') {
   this.setState({
    myclass: 'coolclass'
   })
  }
 else {
  this.setState({
    myclass: '',
  })
 }
}

render() {
 return (
  <div className="App">
    <div id="box" onClick={this.divclicked}>
    </div>
    <div id="seconddiv" className={this.state.myclass}>
     <p>help help</p>
     <p>help help</p>
     <p>help help</p>
     <p>help help</p>
     <p>help help</p>
    </div>
  </div>
  );
 }
}

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

#box {
 height: 50px;
 width: 50px;
 background-color: red
}

#seconddiv.coolclass{
 max-height:100%;
 background: purple;
}

#seconddiv {
 max-height: 0%;
 transition: 0.5s;
 overflow: hidden;
}
.App {
  height: 100%;
}
#root {
  height: 1200px;
}

<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>