React动态应用css类

我有两个div:

.divone

和

.divtwo

。最初

.div one

是一个全宽

div

。单击一个按钮，它将缩小到50%的宽度，

.div two

将从右向左打开，webkit动画将占据其他50%的宽度。这个动画是平滑的。再次单击按钮

。第一分区
的宽度为100%，第二分区
的宽度为0%。到目前为止，已经有了这方面的动画

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

示例说明：


如何实现第二个动画，即
.div two
右侧从50%减少到0%，而div one从50%扩展到100%
 好吧，这里有一个例子。简而言之，我会使用css转换，而不是像这样简单的关键帧


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={show:false}
this.show=this.show.bind（this）
}
show（）{
this.setState（prevState=>（{show:！prevState.show}））
}
render（）{
返回(
{this.state.show？'hide'：'show'}
一
二
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
正文{
保证金：0；
}
.包装纸{
溢出：隐藏；
空白：nowrap；
}
.1、.2{
背景：#333；
边框：2个实心#787567；
框大小：边框框；
颜色：#fff；
显示：内联块；
字体系列：arial；
溢出：隐藏；
填充：20px；
文本对齐：居中；
过渡：边框0.2s，填充0.2s，宽度0.2s；
}
.一{
宽度：100%；
}
.二{
边框宽度：2px0；
填充：20px0；
宽度：0；
}
.表演一，表演二{
边框宽度：2倍；
填充：20px；
宽度：50%；
}

谢谢！我会尽量这样做！只有一个问题：如果show按钮位于打开第二分区的第一分区，然后第二分区有一个close按钮，该怎么办。这会改变您使用的逻辑吗？在我的实际案例中，div one中有两个按钮：一个打开div two，另一个打开div tree（即登录注册），div two，div three有关闭按钮来关闭打开的目录div@Nitish不，据我所知，逻辑是一样的。按钮在哪里并不重要。快乐编码！
.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%}
}