All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

Duration

All Animation types enable you to control the duration of the entering and exiting animation effects.

To configure the duration, define the transitionEnterDuration or, respectively, the transitionExitDuration property. The passed value represents the duration of the animation in milliseconds.

<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 };
    }

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

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

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

        return (
            <div>
                <dl>
                    <dt>
                        Animate:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Slide
                    transitionEnterDuration={800}
                    transitionExitDuration={1000}
                >
                    {children}
                </Slide>
            </div>
        );
    }
}

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