What could be simpler than this:
{this.state.dash ?
<div className='dashWrapper slide'>
HELLO
</div> : null}
I've tried everything, but nothing seems to show up inside the div. I've spent so much time on this and I can't figure out why it's not working. The div itself displays fine, but anything I put inside it just doesn't show.
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;}
}
PLEASE SOMEONE HELP ME BEFORE I BREAK MY KEYBOARD :(
Full 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>