Animation / Life-Cycle Hooks
material theme

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.
<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.

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