React 动态应用 css 类

Question

我有两个 div：.div-one 和 .div-two。最初.div-one 是全宽div。在单击按钮时，它会减小到 50% 的宽度，.div-two 从右到左打开，并带有 webkit 动画以占据其他 50% 的宽度。这个动画很流畅。再次单击按钮时，.div-one 的宽度为 100%，.div-two. 的宽度为 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>

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

示例说明：

如何实现第二个动画，即 .div-two 向右从 50% 减少到 0% 并且 div-one 从 50% 扩展到 100% ？

Answer 1

嗯，这是一个例子。简而言之，我会使用 css 过渡，而不是像这样简单的关键帧。

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>