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')
);