Animation / Duration
material theme

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

 /