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”一个className，CSS负责隐藏div。问题是，当我给出className coolclass时，我不想使用px但想要使用百分比。目前，它从0px到300px。但我希望它从0px到100％;我如何实现这一目标。当我尝试将高度100％放入seconddiv时，幻灯片动画不起作用。

Answer 1

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

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>

如何滑动或隐藏具有过渡反应的div？

1 个答案: