State-based animation for a React component

Question

I have a component, PromptBox that I want to animate off the left side of the screen on a state change from center. Then on another state change, animate from off the right side, into the center

Here is my code for the component. I was attempting to use a this.isActive() function to manage the state and animation which just makes the component disappear. 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

so update your css to this:

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