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

Edit In Stackblitz  

Change Theme:Material theme

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

Edit In Stackblitz  

Change Theme:Material theme

Suggested Links

• Basic Configuration
• API Reference of the Animation Package