为什么放置在我的 <div> 中的元素不显示？

Question

就这么简单：

{this.state.dash ? 
                <div className='dashWrapper slide'>
                  HELLO
                </div> : null}

无论我在这个 div 中放什么，都没有出现。我真的很生气，因为我已经做了很长时间了，我看不出有任何理由这不起作用。 div 本身显示得非常好，但里面的任何东西都是不行的。

CSS：

.dashWrapper {
    width: 100%;
    height: 100vh;

    background: white;
}

.slide {
    position: absolute;
    bottom: -100%;

    -webkit-animation: slide 1s forwards;
    animation: slide 1s forwards;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}

@-webkit-keyframes slide {
    100% {bottom: 0;}
}

@keyframes slide {
    100% {bottom: 0;}
}

在我弄坏我的键盘之前请有人帮助我:(

完整的 JSX

<div className='pageWrapper'>
          <div className='slides'>
            <div className='one' grey={this.state.grey}>
              <div className='chineseHeader'/>
              <div className='englishHeader'/>
              <div className='mePhoto'/>
              <div className='featuredWorkDivider'/>
              <div className='dash' onMouseDown={() => this.setState({grey: '1', dash: true})}/>
              <div className='allWorksDivider'/>
              <div className='allWorks'>
                <h1 className='work' onMouseDown={() => this.setState({grey: '1', busy: true})}>Busy Map</h1>
                <h1 className='work' onMouseDown={() => this.setState({grey: '1', oke: true})}>Oke</h1>
                <h1 className='work' onMouseDown={() => this.setState({grey: '1', scav: true})}>Scav Hunt</h1>
                <h1 className='work' onMouseDown={() => this.setState({grey: '1', van: true})}>Vanstrings</h1>
              </div>
            </div>
            {this.state.dash ? 
              <div className='dashWrapper slide'>
                <h1 className='back'>Back</h1>
              </div> : null}
            {this.state.busy ? <div/> : null}
            {this.state.oke ? <div/> : null}
            {this.state.scav ? <div/> : null}
            {this.state.van ? <div/> : null}
          </div>
        </div>

Answer 1

尝试将您的 dashWrapper 类更改为如下所示。

    .dashWrapper {
        width: 99%;
        height: 100vh;
        background: white;
    }

请注意，这可能会破坏其他内容，但单独来看，此调整应该可以修复您的幻灯片。如果没有应用程序的完整上下文，很难就 CSS 提出建议。