Animations

The Popup allows you to enable or disable its opening and closing animation.

To control the animation behavior, use the animate property.

<style>
  .popup-content {
    padding: 30px;
    color: #787878;
    background-color: #fcf7f8;
    border: 1px solid rgba(0,0,0,.05);
  }
</style>
class AppComponent extends React.Component {
    anchor = null;
    state = { show: false, animate: true, openDuration: 300, closeDuration: 300 };

    render() {
        const { show, animate, openDuration, closeDuration } = this.state;

        return (
            <div>
                <div className="example-config">
                    <input
                        id="animate"
                        type="checkbox"
                        className="k-checkbox"
                        checked={animate}
                        onChange={() => this.setState({ animate: !animate })}
                    />
                    <label htmlFor="animate" className="k-checkbox-label">Animate</label>
                    <hr />
                    <input
                        id="openDuration"
                        type="number"
                        min="0"
                        disabled={!animate}
                        value={openDuration}
                        onChange={event => this.setState({
                            openDuration: event.target.value ? event.target.valueAsNumber : 0
                        })}
                        style={{ width: '60px' }}
                    />
                    <label htmlFor="openDuration" className="k-label">&nbsp;Opening duration</label>
                    &nbsp;
                    <input
                        id="closeDuration"
                        type="number"
                        min="0"
                        disabled={!animate}
                        value={closeDuration}
                        onChange={event => this.setState({
                            closeDuration: event.target.value ? event.target.valueAsNumber : 0
                        })}
                        style={{ width: '60px' }}
                    />
                    <label htmlFor="closeDuration">&nbsp;Closing duration</label>
                    <hr />
                </div>
                <button
                    className="k-button"
                    onClick={() => this.setState({ show: !show })}
                    ref={button => this.anchor = button}
                >
                    {show ? 'Hide' : 'Show'}
                </button>
                <Popup
                    anchor={this.anchor}
                    show={show}
                    animate={animate ? { openDuration, closeDuration } : false}
                    popupClass={'popup-content'}
                >
                    <p style={{ margin: '15px' }}>Popup content.</p>
                </Popup>
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);
In this article
 /