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