Animation / Life-Cycle Hooks
Life-Cycle Hooks
When you declaratively add or remove a child element, all Animations call specific hooks during the entering or exiting of the element.
Adding Child Elements
Each time you add a component to an entering animation, the Animations call the following hooks:
onEnter
—Called before the animation starts.onEntering
—Called after the animation started.onEntered
—Called when the animation completes.
- Example
- View Source
- Open In Stackblitz
<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);
}
.animation-wrapper {
margin-bottom: 40px;
}
</style>
class EventLog extends React.Component {
renderLogs = () => {
return this.props.logs.map((log, index)=> {
return(<li key={index}>{log}</li>)
})
}
render() {
return(
<div className="example-config">
<h5>{this.props.title}</h5>
<ul className="event-log">
{this.renderLogs()}
</ul>
</div>
)
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = { callbackCalls: [], show: false };
}
onClick = () => {
this.setState({
show: !this.state.show
});
}
onEnter = () => {
const calls = this.state.callbackCalls.slice();
calls.unshift("component will enter");
this.setState({
callbackCalls: calls
});
}
onEntering = () => {
const calls = this.state.callbackCalls.slice();
calls.unshift("component is entering");
this.setState({
callbackCalls: calls
});
}
onEntered = () => {
const calls = this.state.callbackCalls.slice();
calls.unshift("component did enter");
this.setState({
callbackCalls: calls
});
}
renderLogs = () => {
return this.state.callbackCalls.map((log, index)=> {
return(<li key={index}>{log}</li>)
})
}
render() {
const { show } = this.state;
const children = show ? (<div className="content">CONTENT</div>) : null;
return (
<div className="example row">
<div className="col-md-6 col-sm-6 animation-wrapper">
<dl>
<dt>
Slide:
</dt>
<dd>
<button className="k-button" onClick={this.onClick}>Animate</button>
</dd>
</dl>
<Slide
onEnter={this.onEnter}
onEntering={this.onEntering}
onEntered={this.onEntered}
>
{children}
</Slide>
</div>
<div className="example-config col-md-6 col-sm-6">
<h5>Log: </h5>
<ul className="event-log">
{this.renderLogs()}
</ul>
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
Removing Child Elements
Each time you remove a component from an existing animation, the Animations call the following hooks:
onExit
—Called before the animation starts.onExiting
—Called after the animation started.onExited
—Called when the animation completes.
At this point, the animated child is not available in the DOM. For DOM operations, pass a
childFactory
function.
- Example
- View Source
- Open In Stackblitz
<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);
}
.animation-wrapper {
margin-bottom: 40px;
}
</style>
class App extends React.Component {
constructor(props) {
super(props);
this.state = { callbackCalls: [], show: true };
}
onClick = () => {
this.setState({
show: !this.state.show
});
}
onExit = () => {
const calls = this.state.callbackCalls.slice();
calls.unshift("component will exit");
this.setState({
callbackCalls: calls
});
}
onExiting = () => {
const calls = this.state.callbackCalls.slice();
calls.unshift("component is exiting");
this.setState({
callbackCalls: calls
});
}
onExited = () => {
const calls = this.state.callbackCalls.slice();
calls.unshift("component did exit");
this.setState({
callbackCalls: calls
});
}
renderLogs = () => {
return this.state.callbackCalls.map((log, index)=> {
return(<li key={index}>{log}</li>)
})
}
render() {
const { show } = this.state;
const children = show ? (<div className="content">CONTENT</div>) : null;
return (
<div className="example row">
<div className="col-md-6 col-sm-6 animation-wrapper">
<dl>
<dt>
Slide:
</dt>
<dd>
<button className="k-button" onClick={this.onClick}>Animate</button>
</dd>
</dl>
<Slide
unmountOnExit={true}
onExit={this.onExit}
onExiting={this.onExiting}
onExited={this.onExited}
>
{children}
</Slide>
</div>
<div className="example-config col-md-6 col-sm-6">
<h5>Log: </h5>
<ul className="event-log">
{this.renderLogs()}
</ul>
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);