Disabled Animations

The Animations allow you to enable or disable their showing or hiding effect.

The control over the disabled animation state results in an instant element display or its disappearance. By default, the Expand, Push, Reveal, Slide, and Zoom animations apply the showing or hiding effect. To disable these effects, set the enter or, respectively, the exit property to false.

<style>
 .content {
   width: 100px;
   padding: 10px;
   color: #787878;
   background-color: #fcf7f8;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
   border: 1px solid rgba(0,0,0,.05);
 }
 </style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: false, enter: true, exit: true };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    onChange = (e) => {
        this.setState({
            [e.target.name]: e.target.checked
        })
    }

    render() {
        const { show } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;

        return (
            <div>
                <dl>
                    <dt>
                        <dl>
                            <input
                                type="checkbox"
                                id="enter"
                                className="k-checkbox"
                                name="enter"
                                checked={this.state.enter}
                                onChange={this.onChange}
                            />
                            <label htmlFor="enter" className="k-checkbox-label">
                                Enter:&nbsp;
                            </label>
                            <br />
                            <input
                                type="checkbox"
                                id="exit"
                                className="k-checkbox"
                                name="exit"
                                checked={this.state.exit}
                                onChange={this.onChange}
                            />
                            <label htmlFor="exit" className="k-checkbox-label">
                                Exit:&nbsp;
                            </label>
                        </dl>
                    </dt>
                    <dt>
                        Animate:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Slide
                    enter={this.state.enter}
                    exit={this.state.exit}
                >
                    {children}
                </Slide>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article