Reactコンポーネントの状態ベースのアニメーション

Question

私は、中心からの状態変化時に画面の左側からアニメートするコンポーネント、PromptBoxを持っています。次に、別の状態変更で、右側から中心にアニメーションします

ここはコンポーネントのコードです。私はthis.isActive()機能を使用して、コンポーネントが消えるだけの状態とアニメーションを管理しようとしていました。 CSS：

.prompt-box { 
    display: block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: #1E1E1E; 
    width: 35%; 

    -webkit-transition-property: left; 
    -webkit-transition-duration: 1.0; 
    -webkit-transition-property: ease-in-out; 
} 

// before animating in (off to the right) 
.prompt-box.ready { 
    left: 100%; 
} 

// animating out to the left 
.prompt-box.done { 
    left: -100%; 
} 

JS：

isActive() { 
    const { activity } = this.state; 

    if (activity === 'done') { 
     return 'prompt-box done'; 
    } else if (activity === 'ready') { 
     return 'prompt-box ready'; 
    } else { 
     return 'prompt-box'; 
    } 
} 

render() { 
    return (
     <div className={this.isActive()}> 
      <p className='title'>What's in your future?</p> 

      <ul className='options-holder'> 
       { 
        this.state.items.map((item, index) => (
         <li key={item.id} className={`option ${index === 0 ? 'first' : ''}`}> 
          <div className='circle' onClick={this.removeItem} /> 

          <p className='item-text'>{ item.text }</p> 
         </li> 
        )) 
       } 

       <li key={0} className={`option form ${this.state.items.length === 0 ? 'only' : ''}`} ref={el => (this.formLi = el)}> 
        <div className='circle form' /> 

        <form className='new-item-form' onSubmit={this.handleSubmit}> 
         <input 
          autoFocus 
          className='new-item-input' 
          placeholder='Type something and press return...' 
          onChange={this.handleChange} 
          value={this.state.text} 
          ref={input => (this.formInput = input)} /> 
        </form> 
       </li> 
      </ul> 

      <button className='confirm-button' onClick={this.submitAndContinue}>Continue</button> 
     </div> 
    ); 
} 

Answer 1

ので、あなたのCSSはこれに更新します。

... 
-webkit-transition-property: left; 
-webkit-transition-duration: 1s; 
-webkit-transition-timing-function: ease-in-out;