CODEWITHSUNDEEP
cssreactjssasscss-animations
Thinker
Thinker

Reputation: 5366

React apply css classes dynamically

I have two divs: .div-one and .div-two. Initially .div-one is a full width div. On a button click it reduces to 50% width and .div-two opens from right to left with webkit animation to occupy other 50% width. This animation is smooth. Again on button click .div-one is made to 100% width and .div-two. is made 0% width. There is so far animation for this.

My HTML:

<div className={`div-one ${!this.state.showRegistration && !this.state.showLogin ? 'full-width' : 'half-width'}`}>
</div>
<If condition={this.state.showRegistration}>
   <div className='div-two'>
   </div>
</If>

My CSS:

.div-one {
  background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: absolute;
  width: 100%;
  min-height: 500px;
  min-height: 100vh;


}

.div-one.half-width {
  -webkit-animation: right-to-left-div1 0.3s forwards;
  animation: right-to-left-div1 0.3s forwards;
}

.div-one.full-width{
  -webkit-animation: left-to-right-div1 0.3s forwards;
  animation: left-to-right-div1 0.3s forwards;
}

.div-two {
  position: relative;
  width: 50%;
  height: 100vh;
  background-color: #EEEEEE;
  -webkit-animation: right-to-left-div2 0.3s forwards;
  animation: right-to-left-div2 0.3s forwards;
}

@keyframes right-to-left-div1{
  to {
    width: 50%;
  }
}


@keyframes left-to-right-div1{
  to{
    width:100%
  }
}

@keyframes right-to-left-div2{
  from{left:100%}
  to{left:50%}
}
@keyframes left-to-right-div2{
  from{left:0%}
  to{left:50%}
}

Example ilustration:

enter image description here

How can I achieve the second animation i.e. .div-two reduces from 50% to 0% to the right and div-one expands from 50% to 100% ?

Upvotes: 1

Views: 563

Answers (1)

bowheart
bowheart

Reputation: 4686

Well, here's an example. In short, I'd use css transitions, not keyframes for something as simple as this.

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {show: false}
    
    this.show = this.show.bind(this)
  }
  
  show() {
    this.setState(prevState => ({show: !prevState.show}))
  }
  
  render() {
    return (
      <div className={'wrapper' + (this.state.show ? ' show' : '')}>
        <div>
          <button onClick={this.show}>{this.state.show ? 'hide' : 'show'}</button>
        </div>
        <div className="one">one</div>
        <div className="two">two</div>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
body {
  margin: 0;
}

.wrapper {
  overflow: hidden;
  white-space: nowrap;
}

.one, .two {
  background: #333;
  border: 2px solid #787567;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-family: arial;
  overflow: hidden;
  padding: 20px;
  text-align: center;
  transition: border 0.2s, padding 0.2s, width 0.2s;
}

.one {
  width: 100%;
}
.two {
  border-width: 2px 0;
  padding: 20px 0;
  width: 0;
}

.show .one, .show .two {
  border-width: 2px;
  padding: 20px;
  width: 50%;
}
<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>

Upvotes: 1

Related Questions